171 lines
11 KiB
Markdown
171 lines
11 KiB
Markdown
# 开发规划 — cz-web（auto-dev 全流程跟踪表）
|
||
|
||
## 使用说明（工作规则）
|
||
|
||
1. **状态标记**：`[x]` = 开发完成并验证通过；`[~]` = 开发中；`[ ]` = 未开始；`[!]` = 阻塞（注明原因）。
|
||
2. **每完成一项立即打 `[x]`**（开发结束标记），不得批量补标。
|
||
3. **之后只做未完成（`[ ]`/`[~]`/`[!]`）的部分**，已完成项不再重做，除非回归失败。
|
||
4. 每个模块收尾必须过 `pnpm build`（vue-tsc 零错误）才算可打 `[x]`。
|
||
5. 当前约束：**无蓝湖设计稿、无接口文档** → 阶段二/接口细节 `[!]` 阻塞中；页面代码按 PRD + 原型降级开发（结构/交互先行，视觉参数用 `styles/variables.less` 近似值，接口用 store 层 mock 临时实现并集中标注 `// TODO(api)`，文档到位后仅替换 api 层）。
|
||
|
||
## 阶段总览
|
||
|
||
| 阶段 | 内容 | 状态 |
|
||
| --- | --- | --- |
|
||
| 阶段一 | PRD 生成（`docs/PRD.md`） | [x] |
|
||
| 阶段二 | 蓝湖 MCP 设计稿读取（标注参数/切图） | [!] 无设计稿，阻塞 |
|
||
| 阶段三 | 页面结构规划（`docs/page-architecture.md`） | [x] |
|
||
| 阶段四 | 页面代码生成 + 组件拆分 | [x] |
|
||
| 阶段五 | API + Store 逻辑层 | [x] |
|
||
| 阶段六 | 公共组件提取 | [x] |
|
||
| 阶段七 | 自动验证与修正（`pnpm build` 零错误） | [x] |
|
||
| 补齐 | 接口文档落地后替换 mock api 层 | [!] 无接口文档，阻塞 |
|
||
| 补齐 | 蓝湖到位后校准视觉（色值/间距/字号/切图） | [!] 无设计稿，阻塞 |
|
||
|
||
## P0 基础工程（全模块前置）
|
||
|
||
- [x] vite.config.ts：配置 `@/` 别名、`css.preprocessorOptions.less.additionalData` 注入 variables.less、安装 less
|
||
- [x] src/styles/：index.less + variables.less（色/字/间距/圆角近似值）+ mixins.less + reset.less + common.less
|
||
- [x] src/types/api.d.ts：ApiResponse\<T\>、PageResult\<T\>、FileInfo
|
||
- [x] src/types/router.d.ts：RouteMeta 扩展（title、requiresAuth）
|
||
- [x] src/types/global.d.ts + src/env.d.ts
|
||
- [x] src/utils/：request.ts（唯一 axios 实例 + 拦截器）、storage.ts、validate.ts、format.ts
|
||
- [x] src/composables/：useCountDown.ts、useLoading.ts、useScroll.ts、useIntersection.ts
|
||
- [x] src/directives/：lazy.ts、debounce.ts、throttle.ts、index.ts（setupDirectives）
|
||
- [x] src/stores/index.ts（pinia 实例）+ stores/modules/site.ts（全局 loading/站点配置）
|
||
- [x] src/router/index.ts + routes.ts + guard.ts（Home + 404 先行注册，其余路由随 M1–M10 各自注册步骤接入）
|
||
- [x] src/layout/index.vue（AppHeader + router-view + AppFooter 骨架）
|
||
- [x] src/components/：AppHeader.vue、AppFooter.vue、AppButton.vue、index.ts
|
||
- [x] src/main.ts：注册 pinia/router/指令、引入 styles/index.less
|
||
- [x] 验证：`pnpm build` 零错误（vue-tsc + vite build 通过；Playwright 冒烟：header/footer/占位页渲染正常，控制台 0 错误）
|
||
|
||
## 模块开发清单（每模块七步，完成即打 [x]）
|
||
|
||
### M1 home（首页 + 业务详情）
|
||
|
||
- [x] types/business/home.d.ts（含 cases.d.ts 案例实体与 api.d.ts BusinessType 共享枚举，首页案例卡提前复用）
|
||
- [x] api/home.ts（getHomeStats、getBusinessLines、getFeaturedCases、getBusinessDetail）`// TODO(api)`
|
||
- [x] stores/modules/home.ts（useHomeStore）
|
||
- [x] views/home/index.vue + index.ts + cpns/（HomeWelcome、HomeStats、HomeQuickEntries、HomeBusinessCards、HomeCaseShowcase、HomeServiceTabs）
|
||
- [x] views/home/detail.vue（业务详情）
|
||
- [x] router 注册 `/` 与 `/business/:type`
|
||
- [x] 复用检查 + `pnpm build` 通过（Playwright QA：首页六区块渲染、Tab 筛选生效、业务详情页内容完整、控制台 0 错误）
|
||
|
||
### M2 cases（案例库）
|
||
|
||
- [x] types/business/cases.d.ts（M1 已建，M2 直接复用）
|
||
- [x] api/cases.ts（getCaseList、getCaseDetail、toggleFavorite、getCaseCounts）`// TODO(api)`（8 条 mock + 筛选/分页）
|
||
- [x] stores/modules/cases.ts（useCasesStore：列表/筛选/分页/收藏）
|
||
- [x] views/cases/index.vue + detail.vue + index.ts + cpns/（CasesFilter、CasesGrid、CaseDetailHeader、CaseRichText）
|
||
- [x] 公共组件 CaseCard（M1 已建）、FilterPanel、PaginationBar 上移 components/
|
||
- [x] router 注册 `/cases`、`/cases/:id`
|
||
- [x] 复用检查 + `pnpm build` 通过（Playwright QA：4 组筛选 + 计数 8/4/2/1、筛选 8→4 卡 + chip 回显、详情四段富文本、收藏切换 + toast、控制台 0 错误）
|
||
|
||
### M3 demand（需求提报）
|
||
|
||
- [x] types/business/demand.d.ts
|
||
- [x] api/demand.ts（submitDemand、saveDraft、uploadAttachment）`// TODO(api)`
|
||
- [x] stores/modules/demand.ts（useDemandStore：表单态/草稿/提交）
|
||
- [x] views/demand/index.vue + index.ts + cpns/（DemandStep1Business、DemandStep2Info、DemandStep3Confirm）
|
||
- [x] 公共组件 StepForm、FileList、UploadArea、CaseCard 复用接入
|
||
- [x] router 注册 `/demand`
|
||
- [x] 复用检查 + `pnpm build` 通过
|
||
|
||
### M4 login（登录/注册/找回密码）
|
||
|
||
- [x] types/business/user.d.ts
|
||
- [x] api/auth.ts（loginByAccount、loginBySms、sendSmsCode、register、resetPassword）`// TODO(api)`
|
||
- [x] stores/modules/user.ts（useUserStore：token/用户信息/登录态）
|
||
- [x] views/login/index.vue（登录）+ register.vue + reset.vue + index.ts + cpns/（LoginForm、SmsLoginForm、RegisterForm、ResetForm）
|
||
- [x] 公共组件 SmsCodeInput、PasswordStrength 上移
|
||
- [x] router 注册 `/login`、`/register`、`/reset-password` + guard.ts 登录守卫
|
||
- [x] 复用检查 + `pnpm build` 通过
|
||
|
||
### M5 project（项目中心）
|
||
|
||
- [x] types/business/project.d.ts
|
||
- [x] api/project.ts（getProjectList、getProjectDetail、uploadProjectFile、deleteProjectFile、submitAfterSales、cancelAfterSales）`// TODO(api)`
|
||
- [x] stores/modules/project.ts（useProjectStore：列表/筛选/详情/文件/售后）
|
||
- [x] views/project/index.vue + detail.vue + after-sales.vue + index.ts + cpns/（ProjectFilter、ProjectTable、ProjectInfoCard、ProjectTeam、ProjectMilestones、ProjectFiles、ProjectFinance、ProjectAfterSales、AfterSalesForm）
|
||
- [x] 公共组件 StatusTag、FileList、StepForm 复用接入
|
||
- [x] router 注册 `/project`、`/project/:id`、`/project/:id/after-sales`
|
||
- [x] 复用检查 + `pnpm build` 通过
|
||
|
||
### M6 contract（合同中心）
|
||
|
||
- [x] types/business/contract.d.ts
|
||
- [x] api/contract.ts（getContractList、getContractDetail、getSignQr、refreshSignQr）`// TODO(api)`
|
||
- [x] stores/modules/contract.ts（useContractStore：列表/详情/签署二维码倒计时）
|
||
- [x] views/contract/index.vue + detail.vue + sign.vue + index.ts + cpns/（ContractTable、ContractInfoCard、ContractSignPanel、SignSteps）
|
||
- [x] 公共组件 QrCodePanel、StatusTag 复用接入
|
||
- [x] router 注册 `/contract`、`/contract/:id`、`/contract/:id/sign`
|
||
- [x] 复用检查 + `pnpm build` 通过
|
||
|
||
### M7 finance（财务中心）
|
||
|
||
- [x] types/business/finance.d.ts
|
||
- [x] api/finance.ts（getFinanceStats、getBillList、getBillDetail、createPayment、getPayResult、getInvoiceList、applyInvoice、sendInvoiceEmail、getInvoiceTitles、createInvoiceTitle、updateInvoiceTitle、deleteInvoiceTitle、setDefaultTitle、exportReport）`// TODO(api)`
|
||
- [x] stores/modules/finance.ts（useFinanceStore：概览统计/账单/支付/发票/抬头）
|
||
- [x] views/finance/index.vue（概览）+ bills.vue + bill-detail.vue + pay.vue + pay-result.vue + invoices.vue + invoice-titles.vue + index.ts + cpns/（FinanceOverview、FinanceChart、BillTable、BillSummaryBar、BillPayPanel、PayMethodDialog、PayResult、InvoiceTable、InvoiceTitleCard、InvoiceTitleDialog）
|
||
- [x] 公共组件 QrCodePanel、StatusTag、ConfirmDialog、PaginationBar 复用接入
|
||
- [x] router 注册 `/finance` 及 6 个子路由
|
||
- [x] 复用检查 + `pnpm build` 通过
|
||
|
||
### M8 message（消息中心）
|
||
|
||
- [x] types/business/message.d.ts
|
||
- [x] api/message.ts（getMessageList、getMessageDetail、markAllRead、markRead）`// TODO(api)`
|
||
- [x] stores/modules/message.ts（useMessageStore：列表/分类未读数/详情）
|
||
- [x] views/message/index.vue + detail.vue + index.ts + cpns/（MessageTabs、MessageList、MessageItem、NoticeDetail）
|
||
- [x] AppHeader 消息铃铛角标接入 message store
|
||
- [x] router 注册 `/message`、`/message/:id`
|
||
- [x] 复用检查 + `pnpm build` 通过
|
||
|
||
### M9 service（在线客服）
|
||
|
||
- [x] types/business/service.d.ts
|
||
- [x] api/service.ts（getChatHistory、sendChatMessage、uploadChatFile）`// TODO(api)`
|
||
- [x] stores/modules/service.ts（useServiceStore：会话/消息/发送）
|
||
- [x] views/service/index.vue + index.ts + cpns/（ChatWindow、ChatMessageItem、ChatFileCard、ChatInput）
|
||
- [x] 全局浮动「在线客服」入口接入
|
||
- [x] router 注册 `/service`
|
||
- [x] 复用检查 + `pnpm build` 通过
|
||
|
||
### M10 profile（个人中心）
|
||
|
||
- [x] types/business/profile.d.ts
|
||
- [x] api/profile.ts（updateNickname、changePassword、bindPhone、unbindPhone、bindEmail、unbindEmail、deleteAccount、verifyIdentity、getAddresses、createAddress、updateAddress、deleteAddress、setDefaultAddress、getFavorites、getQualifications、createQualification、updateQualification、deleteQualification、submitFeedback）`// TODO(api)`
|
||
- [x] stores/modules/profile.ts（useProfileStore：账号/地址/收藏/资质/反馈）
|
||
- [x] views/profile/index.vue（左菜单布局）+ security.vue + address.vue + favorites.vue + qualifications.vue + feedback.vue + help.vue + about.vue + hotline.vue + index.ts + cpns/（ProfileSider、ProfileUserCard、SecurityPanel、ChangePasswordDialog、UnbindAccountDialog、AddressCard、AddressDialog、FavoritesGrid、QualificationCard、QualificationDialog、FeedbackForm、HelpFaq、AboutPanel、HotlinePanel）
|
||
- [x] 公共组件 SmsCodeInput、PasswordStrength、ConfirmDialog、FileList 复用接入
|
||
- [x] router 注册 `/profile` 嵌套 8 子路由
|
||
- [x] 复用检查 + `pnpm build` 通过
|
||
|
||
## 收尾阶段
|
||
|
||
- [x] 阶段六：全局扫描，跨页面重复 UI 上移 components/，更新 components/index.ts barrel
|
||
- [x] 阶段七：逐页对照 PRD/原型自检（布局/交互/字段/组件拆分/规范合规：无 as any、页面不直接 import api）
|
||
- [x] `pnpm build`（vue-tsc）全量零错误
|
||
- [ ] 蓝湖到位后：校准 variables.less 色值/字号/间距，替换切图，逐页对照设计稿修正 → 补打 [x]
|
||
- [ ] 接口文档到位后：逐 api 文件替换 `// TODO(api)` 为真实路径/入参出参，走真实联调 → 补打 [x]
|
||
|
||
## 完成度速查
|
||
|
||
| 单元 | 状态 |
|
||
| --- | --- |
|
||
| P0 基础工程 | [x] |
|
||
| M1 home | [x] |
|
||
| M2 cases | [x] |
|
||
| M3 demand | [x] |
|
||
| M4 login | [x] |
|
||
| M5 project | [x] |
|
||
| M6 contract | [x] |
|
||
| M7 finance | [x] |
|
||
| M8 message | [x] |
|
||
| M9 service | [x] |
|
||
| M10 profile | [x] |
|
||
| 阶段六 公共组件提取 | [x] |
|
||
| 阶段七 验证修正 | [x] |
|
||
| 蓝湖视觉补齐 | [!] |
|
||
| 接口联调补齐 | [!] |
|