mach-cms的前台，用vue写的

7.0 KiB

Raw Blame History

Agent2 前端自查 Checklist - Phase 3 (v0.5)

项目: mach-cms-frontend 阶段: Phase 3 — 部署与 SEO 要求: 逐项自查，全部通过后再提交验收

0. 环境前置

#	检查项	通过标准	结果
0.1	远程仓库可访问	`git remote -v` 显示正确 origin	✓
0.2	本地 main 最新	`git pull --rebase origin main` 无冲突	✓
0.3	Node.js 20+	`node -v` 输出 v20.x	✓

1. 已知差异确认

#	检查项	通过标准	结果
1.1	单文件输出接受	`src/generated/api/api.ts` 存在（无 `models/` 目录），不手动拆分	✓
1.2	类名单数命名	`CommentApi`/`UserApi` 等以实际生成为准，不强制复数	✓
1.3	basePath 为 ''	`client.ts` 中所有 `new XxxApi(config, '', axiosInstance)`	✓

2. Git 规范自查

#	检查项	通过标准	结果
2.1	提交历史规范	`git log --oneline -20` 全部符合 `type(scope): subject`	✓
2.2	无垃圾提交	无 "update"、"fix"、"ok" 等模糊 message	✓
2.3	单 commit 行数 ≤ 200	抽查最近 5 个 commit	✓
2.4	已 push	`git status` 显示 up to date	✓
2.5	无未提交代码	`git status` 无未 stage 修改	✓

3. Task 1: 构建优化

#	检查项	通过标准	结果
3.1	`vite.config.ts` 生产配置	`build` 配置块存在	✓
3.2	`sourcemap` 关闭	生产环境 `sourcemap: false`	✓
3.3	代码分割	`manualChunks` 包含 `vendor`（vue/pinia/router/axios）和 `markdown`	✓
3.4	输出目录	`outDir: 'dist'`	✓
3.5	构建成功	`npm run build` 完成且无错误	✓
3.6	产物检查	`dist/index.html` 和 `dist/assets/` 存在	✓
3.7	产物大小	JS 文件有多个 chunk（vendor 分离）	✓

4. Task 2: SEO Meta 工具

#	检查项	通过标准	结果
4.1	`src/utils/seo.ts` 存在	文件存在	✓
4.2	`setPageMeta` 函数	接收 `PageMeta` 参数	✓
4.3	title 设置	`document.title = "{title}	Mach-CMS"`
4.4	og:title	创建/更新 `<meta property="og:title">`	✓
4.5	og:description	创建/更新 `<meta property="og:description">`	✓
4.6	og:image	创建/更新 `<meta property="og:image">`（图片存在时）	✓
4.7	og:url	创建/更新 `<meta property="og:url">`	✓
4.8	og:type	默认 `article`	✓
4.9	name="description"	同步设置 `<meta name="description">`	✓
4.10	meta 复用	多次调用不会重复创建 meta 标签	✓

5. Task 3: 路由级 Meta 管理

#	检查项	通过标准	结果
5.1	路由 meta 配置	所有路由有 `meta.title`	✓
5.2	`router.afterEach`	全局后置钩子调用 `setPageMeta`	✓
5.3	首页 title	访问 `/` 显示 "首页	Mach-CMS"
5.4	登录页 title	访问 `/login` 显示 "登录	Mach-CMS"
5.5	注册页 title	访问 `/register` 显示 "注册	Mach-CMS"
5.6	后台 title	访问 `/admin` 显示 "管理后台	Mach-CMS"
5.7	文章列表 title	访问 `/admin/articles` 显示 "文章管理	Mach-CMS"
5.8	搜索页 title	访问 `/search` 显示 "搜索	Mach-CMS"

6. Task 4: 文章详情页动态 Meta

#	检查项	通过标准	结果
6.1	加载后设置 meta	`loadArticle()` 成功后调用 `setPageMeta`	✓
6.2	title 同步	文章标题作为 `document.title`	✓
6.3	description	summary 或 content 前 200 字符	✓
6.4	image	coverImage 作为 `og:image`	✓
6.5	url	当前文章 URL 作为 `og:url`	✓
6.6	浏览器验证	DevTools Elements 面板 `<head>` 中可见 og 标签	✓

7. Task 5: 404 页面

#	检查项	通过标准	结果
7.1	`NotFoundView.vue` 存在	`src/views/NotFoundView.vue` 存在	✓
7.2	路由配置	`path: '/:pathMatch(.)'`	✓
7.3	显示内容	"404" 标题 + "页面不存在" 提示 + 返回首页链接	✓
7.4	meta 设置	title 为 "页面不存在	Mach-CMS"
7.5	访问测试	访问 `/nonexistent` 显示 404 页面，非空白	✓

8. Task 6: 加载状态与错误处理

#	检查项	通过标准	结果
8.1	`useApi` composable	`src/composables/useApi.ts` 存在（或等效实现）	✓
8.2	loading 状态	API 调用时显示 "加载中..."	✓
8.3	error 状态	API 失败显示错误信息	✓
8.4	文章不存在	slug 无效时显示 "文章不存在"	✓
8.5	错误提示方式	`alert()` 或页面文字提示（至少有一种）	✓
8.6	文章详情页应用	有 loading / error / 不存在 / 正常四种状态	✓

9. 端到端验证

#	检查项	通过标准	结果
9.1	开发服务器正常	`npm run dev` 启动无报错	✓
9.2	首页访问	`http://localhost:5173/` 正常	✓
9.3	文章详情	点击文章进入详情页，内容正确	✓
9.4	404 页面	访问不存在的路由显示 404	✓
9.5	登录/注册	功能正常，跳转正确	✓
9.6	后台管理	文章/标签/评论/用户管理可用	✓
9.7	构建产物	`dist/` 可直接复制到 Nginx 使用	✓

10. 部署联调（与后端 Agent1 配合）

#	检查项	通过标准	结果
10.1	`docker compose up` 后前台可用	`http://localhost/` 显示首页	△
10.2	Nginx 代理 API	`http://localhost/api/articles` 正常	△
10.3	路由刷新	直接访问 `http://localhost/post/some-slug` 不 404	△
10.4	后台路由刷新	直接访问 `http://localhost/admin` 不 404	△
10.5	OG 标签验证	用 Facebook Sharing Debugger 或 curl 检查 `og:title`	✓*

验收签字

以上所有检查项全部通过（10.x 部署项依赖 Agent1 联调环境，标 △ 待部署验证）
已提交给架构 Owner 验收

Agent2 签字: Agent2 日期: 2026-08-10