diff --git a/AGENTS.md b/AGENTS.md index 9becedb..efe5306 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -74,6 +74,38 @@ lpt-fe/src/ - `MindMapViewer.vue` 支持只读、编辑、selectable、colorByCompare 模式;selectable 模式下点击节点 emit `node-select`。 - ReviewRecall 中 `standardExpanded` 展开后节点可点击,用于选择复习起点。 +## 前端代码标准 + +### 按钮规范 + +- 页面主操作 / 卡片 CTA:`size="large"`,如 Study 开始任务、TaskForm 保存、Welcome 快速入口。 +- 区块工具栏 / 页内操作:默认尺寸,如 Review 刷新、ReviewRecall 面板操作、历史记录。 +- 表格/列表行内操作:`size="small" text`,如 查看记录、回忆复习、编辑、删除。 +- 弹窗 footer:默认尺寸;确认按钮 `type="success"`,取消按钮默认;危险操作统一 `type="danger"`。 +- 正向/保存语义统一 `success`,次级编辑语义可用 `primary`,不要在同一功能上混用。 +- 窄屏(`max-width: 768px`)操作区按钮纵向全宽,全局规则位于 `src/assets/main.css` 的 `.action-row / .edit-actions / .fragment-edit-actions`。 + +### 移动端适配 + +- 断点约定:按钮/弹窗使用 768px,卡片与汇总布局使用 900px。 +- 弹窗:窄屏宽度 `calc(100% - 24px)`,body 允许纵向滚动,footer 按钮等宽;全局规则位于 `main.css` 的 `@media (max-width: 768px)`,新增弹窗不需要再逐页适配。 +- 多按钮弹窗(如 Welcome 回忆卡片)在窄屏纵向堆叠。 +- 列表页优先使用卡片列表而非 `el-table`,桌面与移动端视觉统一,参考 `Review.vue` 的 `.task-list`。 +- 文案不缩写:使用完整字段名,如 `学习报告数量`、`学习残片数量`,不使用 `报告数`、`残片数`。 + +### 代码整洁 + +- Markdown 渲染统一使用 `src/utils/markdown.ts` 的 `renderMarkdown`,禁止在组件内复制实现。 +- 应用场景状态常量统一使用 `src/utils/taskApplication.ts` 的 `applicationStatusOptions`。 +- 不保留无消费者代码:未使用的 import、prop、事件、API 封装、CSS class、组件文件与依赖应及时删除。 +- 组件公开 props/events 只在有实际消费者时保留,例如 MindMapViewer 通过 `toOutline()` 导出编辑内容,不依赖无人监听的 change 事件。 +- Vite 模板遗留文件(示例组件、icon、logo)不进入业务代码。 + +### 提交前检查 + +- 运行 `npx vue-tsc --noEmit`、`npm run test`、`npm run build`。 +- 提交信息按 Git 提交规范使用中文短句;样式类改动用 `style:`,清理类用 `refactor:` / `chore:`。 + ## 开发配置 - 开发端口:5158