feat skills配置

This commit is contained in:
Ironsp
2026-09-28 09:21:34 +08:00
parent 7a2efa3fea
commit 4e1bb0f82a
17 changed files with 9948 additions and 2 deletions

412
docs/PRD.md Normal file
View File

@@ -0,0 +1,412 @@
# PRD — 虫子智造 研发智造一体化平台(Web 端)
> 来源:`docs/prototype/` 共 10 个墨刀演示原型(无蓝湖设计稿、无接口文档,本文档为唯一需求基线)。
> 项目定位:一站式研发智造一体化服务平台,打通需求提报 → 项目管控 → 合同签署 → 财务结算 → 售后迭代全流程。平台自营,对项目质量全权兜底。
## 1. 全局框架
### 1.1 顶部导航(AppHeader,全站公共)
| 导航项 | 路由 | 说明 |
| --- | --- | --- |
| 首页 | `/` | 门户首页 |
| 案例库 | `/cases` | 成功案例展示 |
| 需求提报 | `/demand` | 需求填报表单 |
| 项目中心 | `/project` | 项目列表/详情 |
| 合同中心 | `/contract` | 合同列表/详情/签署 |
| 财务中心 | `/finance` | 账单/支付/发票 |
| 个人中心 | `/profile` | 账号与资料管理 |
- 右侧:用户头像/昵称、消息铃铛(未读数角标,示例 3)、搜索等。
- 未登录访问受保护路由 → 跳转 `/login`(支持游客模式的部分页面除外)。
### 1.2 全局浮动组件
- **快捷提报**(右侧悬浮按钮):一键跳转 `/demand`。
- **在线客服**(右侧悬浮按钮):一键跳转 `/service`。
### 1.3 全局页脚(AppFooter)
- 版权声明:©2026 虫子智造 研发智造一体化平台,源码/图纸受平台知识产权保护。
- ICP 备案号、公安备案号。
- 联系方式:商务合作 business@chongzizhizao.com、技术支持 support@chongzizhizao.com、客服热线 400-XXX-XXXX、工作时间 周一–周五 9:00–18:00。
- 快速导航:首页 / 案例中心 / 需求提报 / 下载 APP / 帮助中心。
- 核心业务:互联网软件开发 / 硬件电路开发 / 物联网软硬一体化全案 / PCB 制版 & SMT 贴片生产 / 元器件集采与整机装配。
- 平台简介文案(研发智造一体化自营平台…)。
## 2. 页面清单及功能描述
| # | 模块 | 页面 | 原型文件 | 访问权限 |
| --- | --- | --- | --- | --- |
| 1 | home | 首页 | 首页-演示.html | 公开 |
| 2 | home | 业务详情 | 首页-演示.html(业务详情画板) | 公开 |
| 3 | cases | 案例库列表 | 案例库-演示.html | 公开 |
| 4 | cases | 案例详情 | 案例库-演示.html | 公开 |
| 5 | demand | 需求提报 | 需求填报-演示.html | 公开(提交需登录) |
| 6 | login | 登录/注册/找回密码 | 登录-演示.html | 游客 |
| 7 | project | 项目中心列表 | 项目中心-演示.html | 登录 |
| 8 | project | 项目详情 | 项目中心-演示.html | 登录 |
| 9 | project | 申请售后 | 项目中心-演示.html | 登录 |
| 10 | contract | 合同中心列表 | 合同管理-演示.html | 登录 |
| 11 | contract | 合同详情 | 合同管理-演示.html | 登录 |
| 12 | contract | 签署合同 | 合同管理-演示.html | 登录 |
| 13 | finance | 财务中心概览 | 财务中心-演示.html | 登录 |
| 14 | finance | 账单明细 | 财务中心-演示.html | 登录 |
| 15 | finance | 账单详情 | 财务中心-演示.html | 登录 |
| 16 | finance | 扫码支付/支付结果 | 财务中心-演示.html | 登录 |
| 17 | finance | 发票申请 | 财务中心-演示.html | 登录 |
| 18 | finance | 发票抬头管理 | 财务中心-演示.html | 登录 |
| 19 | message | 消息中心 | 消息中心-演示.html | 登录 |
| 20 | message | 系统通知详情 | 消息中心-演示.html | 登录 |
| 21 | service | 在线客服 | 在线客服-演示.html | 登录 |
| 22 | profile | 账号安全 | 个人中心-演示.html | 登录 |
| 23 | profile | 地址管理 | 个人中心-演示.html | 登录 |
| 24 | profile | 收藏列表 | 个人中心-演示.html | 登录 |
| 25 | profile | 资质列表 | 个人中心-演示.html | 登录 |
| 26 | profile | 意见反馈 | 个人中心-演示.html | 登录 |
| 27 | profile | 帮助中心 | 个人中心-演示.html | 登录 |
| 28 | profile | 关于我们 | 个人中心-演示.html | 登录 |
| 29 | profile | 专属客服热线 | 个人中心-演示.html | 登录 |
---
## 3. 各页面交互逻辑
### 3.1 首页(home)
- **欢迎区(登录后)**:问候语「中午好」+ 当日摘要「今天有2个项目正在进行」。
- **数据看板**:待您处理 3 / 进行中 3 / 累计项目 6。
- **快捷入口**:财务台账、合同台账、客服工作台、案例库管理、工单需求池(跳对应模块)。
- **业务服务**:4 张卡片(互联网软件 / 硬件电路 / 物联网全案 / 生产制造),每张含描述 + 「了解详细 >」→ 业务详情页。
- **案例库精选**:按业务类型 Tab(全部/互联网软件/硬件电路/物联网全案/生产制造)筛选案例卡片,「查看更多 >」→ 案例库,「查看详情 >」→ 案例详情。
- **服务区(Tab 切换)**:服务类型(Web应用/小程序/APP/二次开发/桌面工具)与服务内容(五类服务条款富文本 + 视频)。
### 3.2 业务详情(home detail)
- 面包屑「首页 > 业务详情」。
- 业务线介绍(标题 + slogan,如「专业的软件定制开发服务,从需求到上线全流程保障」)。
- 服务内容富文本 + 视频(预览播放)。
- 服务类型子项切换(Web/小程序/APP/二次开发/桌面工具)。
### 3.3 案例库列表(cases)
- 头部:标题「成功案例库」+ 副文案。
- **筛选面板**:
- 业务类型:全部/互联网软件/硬件电路/物联网全案/生产制造(单选,带计数 25/25/25/25/100)。
- 所属行业:全部/电商零售/教育培训/医疗健康/硬件电路/能源环保/房地产(多选按钮组)。
- 项目规模:全部/50万以下/50-100万/100-300万/300-500万/500万以上(多选)。
- 完成时间:全部/近3个月/近半年/近一年/开始时间—结束时间(日期范围)。
- 关键字搜索 + 重置。
- 已选条件回显(「已选条件(4个)」+ 条件 chip × 移除 + 清空)、「确定筛选(100个结果)」。
- **案例卡片**:封面图、业务类型标签、标题、查看详情 >;字段:完成时间/服务团队/规模/所属行业/项目周期/客户类型。
- 分页器(‹ 1 2 3 4 5 ›)。
- **收藏列表**(profile 模块复用):同卡片布局,展示已收藏案例。
### 3.4 案例详情(cases detail)
- 面包屑「案例库 > 案例详情」。
- 项目概览:标题、业务类型、完成时间/服务团队/规模/所属行业/项目周期/客户类型。
- 操作:**收藏**(收藏/已收藏切换)、**分享**。
- 视频区(预览播放)。
- 富文本区块:项目背景、客户痛点、需求描述、交付物清单。
- 底部 CTA:**一键填报类似案例** → 跳转 `/demand` 并预填业务类型。
### 3.5 需求提报(demand)
分步表单(1 选择业务类型 → 2 填写需求信息 → 3 确认信息并补充备注):
1. **选择业务类型***(单选 5 项):互联网软件 / 物联网全案 / 生产制造 / 硬件电路 / 其他(「若没有对应的服务内容请选择该选项」),每项含图标 + 描述。
2. **填写需求信息***:
- 项目名称*(文本)。
- 附件上传:支持图片/文档/压缩包,大小不超过 1G;支持上传按钮 + 文件列表(名称/大小/上传时间/预览/下载/删除)。
- 核心需求描述*(多行,0/500 字计数)。
- 预计开发周期(工作日,数字)。
- 预算范围(按钮单选:1万以下 / 1-5万 / 5-10万 / 10万+)。
3. **确认信息并补充备注**:
- 用户名称(默认当前登录用户「王永志」)。
- 用户手机号(脱敏 1866\*\*\*\*9618,可手填)。
- 补充备注(0/500 字计数)。
- 底部:提示语「提交后我们的专业顾问将在一个工作日内与您联系」。
- 操作按钮:**立即提报** / **保存草稿** / **重置** / 手填。
### 3.6 登录/注册/找回密码(login)
统一视觉:左侧品牌区(logo + 「虫子智造研发一体化平台」+ slogan「安全 · 高效 · 可控」),右侧表单区;顶部「游客模式」入口、「没有账号?立即注册 / 已有账号?立即登录」切换。
- **账号密码登录**:账号、密码、协议勾选(《用户协议》《隐私政策》)、登录按钮。
- **手机验证码登录**:手机号、验证码、「获取验证码 / 60秒后重新获取」倒计时、协议勾选、登录按钮。
- **注册**:手机号、验证码、设置密码(6-20 位,**密码强度指示:弱/中/强**,强度过低提示「密码等级过低,请重新输入」)、确认密码、协议勾选、注册按钮。
- **找回密码**:手机号、验证码、设置密码、确认密码、「确认修改」。
- 状态反馈:「注册成功,请登录」「修改成功,请登录」「登录失败,请先注册账号」,**3 秒后自动跳转**。
### 3.7 项目中心列表(project)
- 标题 + 副文案「查看和管理您的所有项目,实时跟踪项目进度」。
- 筛选:关键字搜索、业务类型(全部/互联网软件/硬件电路/物联网全案/生产制造)、项目状态(全部/待立项/进行中/待验收/已完成/售后中/已取消,带计数 25/25/25/25/100)、提交时间(全部/近3个月/近半年/近一年/起止日期)、已选条件回显、确定筛选/重置。
- 表格列:序号、项目编号、项目名称、业务类型、进度(64%)、状态、操作(详情;已完成时另有**申请售后**)。
- 状态枚举:待立项 / 进行中 / 待验收 / 已完成 / 售后中 / 已取消。
- 分页器。
### 3.8 项目详情(project detail)
- 面包屑「项目中心 > 项目详情」。
- 头部信息卡:项目名称(社区康养智能服务系统)、项目编号、业务类型、提交时间、状态标签。
- 项目团队:项目经理卡片(头像/姓名/角色,张三)。
- **Tab 四页签**:
1. **项目进度**:总体进度 65% + 开发进度滑杆;里程碑时间轴(需求确认 → 原型设计 → 开发实现 → 测试验收 → 项目交付),每节点状态(待开始/进行中/已完成)+ 完成时间;开始/结束时间。
2. **项目文件**:文件列表(项目需求规格说明书.pdf 等,2.4MB · 上传时间),操作:**预览 / 下载 / 删除**;**上传文档**按钮。
3. **合同财务**:付款计划卡片列表(第一期·预付款 比例33% / 第二期·付款 33% / 第三期·尾款 33%,含账单号、关联项目、金额 ¥20100,状态:已支付(含交易流水号)/待支付(**立即支付**按钮)/未到期);发票记录(预览/下载);合同文件(预览/下载)。
4. **售后信息**:售后工单状态卡(「售后工单处理中——工程师正在处理您的修改需求」);**申请售后 / 取消售后**按钮。
### 3.9 申请售后(project → after-sales)
- 分步表单:1 选择业务类型*、2 填写问题描述*、3 补充备注。
- 字段:项目名称*(默认当前项目)、售后类型*(推荐选项 + 手动输入,示例「BUG问题」)、问题描述*(0/500 字,「请详细描述您的问题...」)、附件上传(图片/文档/压缩包 ≤1G,文件列表预览/下载/删除)、补充备注(0/500 字)。
- 操作:**申请售后**(提交,生成售后工单) / **重置** / **取消**。
### 3.10 合同中心列表(contract)
- 标题「合同中心」+ 副文案「项目电子合同在线签署、归档与查询管理」。
- 关键字搜索 + 搜索/重置。
- 表格列:合同编号、合同名称、合同类型、合同金额、关联项目、项目编号、签署状态、生效时间、到期时间、操作(**去签署**(待签署时)/ 详情)。
- 签署状态枚举:履行中 / 已过期 / 待签署。
- 分页器。
### 3.11 合同详情(contract detail)
- 面包屑「合同中心 > 合同详情」。
- 合同信息(只读表单):合同名称、合同类型、合同编号、签订日期、生效日期、到期日期、合同状态。
- 关联项目:项目编号、项目名称、「查看详情」→ 项目详情。
- 合同文件:文件卡(预览/下载)。
- 操作:**返回**。
### 3.12 签署合同(contract sign)
- 面包屑「合同中心 > 合同详情 > 签署合同」。
- 左侧二维码(**04:32 倒计时失效**,过期可点击刷新)。
- 右侧「扫码验证签署操作步骤」四步引导:
1. 打开手机支付宝(右上角 + → 扫一扫)。
2. 验证身份信息(实名验证,确保本人操作)。
3. 确认合同内容并签署(指定位置签署)。
4. 完成签署(页面自动跳转至合同详情页)。
### 3.13 财务中心概览(finance)
- 标题「财务中心」+ 副文案「账单、支付、发票统一财务管理中心」。
- **累计消费总额**卡片(¥1,726,823,900)+ 月份选择(2026年1月 SELECT)+ 时间维度切换(本季度/本年)。
- **业务类型分布**图表(生产智造/物联网全案/硬件电路/互联网软件 饼图)。
- 待支付角标(3)。
- **快捷入口**:发票申请、账单明细、报表导出。
### 3.14 账单明细(finance bills)
- 面包屑「财务中心 > 账单明细」。
- 状态 Tab:全部 / 待支付 / 已支付 / 未到期(带计数)。
- 关键字搜索 + 搜索/重置。
- 表格列:多选框、序号、账单名称(第一期·预付款 比例33%)、账单号、交易流水号、项目名称、订单金额、状态、操作(**去支付**(待支付)/ 详情)。
- 汇总条:总笔数 10、总金额 123212、待支付 3。
- 多选后:「已选择1笔订单 · 合计:¥20000」+ **立即支付**。
- 分页器。
### 3.15 账单详情(finance bill detail)
- 面包屑「财务中心 > 账单明细 > 账单详情」。
- 订单信息卡:账单名称、账单号、关联项目、金额。
- 待支付订单态:**立即支付**入口。
- 已支付订单态:支付信息(付款金额、支付方式、支付时间、交易流水号)。
- 未到期态:状态提示。操作:**返回**。
### 3.16 扫码支付 + 支付结果(finance pay)
- 面包屑「财务中心 > 账单明细 > 账单详情 > 扫码支付」。
- 左侧支付二维码(**04:32 倒计时**,过期可刷新),安全提示「本页面已通过安全验证,请勿向他人泄露付款码」。
- 支付方式:微信支付 / 支付宝支付(**切换支付方式**弹窗:单选,「推荐使用」「其他用户选择」标签)。
- 右侧:支付金额(¥20000)+ 订单明细列表(账单号/关联项目/期数/金额)。
- 「扫码支付操作步骤」三步引导(微信/支付宝各自文案)。
- **支付结果页**:支付成功(✓、付款金额、共N个订单、支付信息:支付方式/支付时间/交易流水号、已支付订单列表)。
### 3.17 发票申请(finance invoices)
- 面包屑「财务中心 > 发票申请」。
- **发票抬头卡**:默认抬头(企业名称 + 税号 + 「企业」标签 + 「默认」标签)、「管理抬头 >」。
- 状态 Tab:全部 / 已开票 / 开票中 / 未开票。
- 表格列:多选框、序号、账单名称、账单号、交易流水号、项目名称、订单金额、状态、申请时间、操作:
- 已开票:**预览 / 下载 / 发送邮箱**;
- 开票中:无操作(进行中);
- 未开票:**申请开票**。
- 关键字搜索 + 分页器。
### 3.18 发票抬头管理(finance invoice-titles)
- 列表卡:抬头类型(企业单位/非企业单位)、发票抬头、税号、默认标签。
- 操作:**+ 新增抬头**、编辑、删除、设为默认 / 取消默认。
- 弹窗(新增/编辑):抬头类型(单选:企业单位/非企业单位)、发票抬头*、税号*。
- 删除二次确认弹窗:「删除后无法恢复,是否继续?」(取消/确认删除)。
### 3.19 消息中心(message)
- 标题「消息中心」+ 副文案「统一接收项目进度、售后工单、账单待办等站内消息,重要业务动态实时提醒」。
- 分类 Tab:全部 / 在线客服 / 状态通知 / 系统通知(未读数角标 3/3/3/9)。
- 关键字搜索 + 搜索/重置 + **全部已读**按钮。
- 消息条目:类型图标、类型标签(系统通知/合同生效/在线客服)、摘要、「刚刚」相对时间、未读标记。
- 分页器。
### 3.20 系统通知详情(message detail)
- 面包屑「消息中心 > 系统通知详情」。
- 标题 + 发布时间 + 富文本正文(功能亮点/使用场景/入口位置等)。
- 附件(PDF 2.5MB,预览/下载)。
- 操作:**返回**。
### 3.21 在线客服(service)
- 标题「在线客服」+ 副文案「在线客服为您提供需求咨询、项目进度查询、业务答疑…」。
- 聊天窗口:客服头像/名称(专属客服)、欢迎语、**历史消息分割线**、「未读」标记。
- 消息类型:文本、文件(物联网全案服务介绍.pdf 2.5MB)、时间戳(今天 10:23)。
- 输入区:多行输入(placeholder「输入消息,按Enter发送,Shift+Enter换行...」)、**Enter 发送**、**拖拽上传文件**、发送按钮。
### 3.22 个人中心(profile)— 左侧菜单布局
左侧菜单:账号安全 / 地址管理 / 收藏列表 / 资质列表 / 意见反馈 / 帮助中心 / 关于我们 / 专属客服热线。头部用户卡:默认名称 + 头像 + 手机号(脱敏,可编辑昵称)。
1. **账号安全**:
- 修改密码(上次修改:15天前;手机号 + 验证码 + 设置密码 + 确认密码 + 强度提示 + 协议勾选 + 确认修改)。
- 绑定手机(已绑定 186\*\*\*\*618;换绑流程:验证并换绑 → 新手机号 + 验证码,提示「换绑新手机号之后,可以用新的手机号及当前密码登录」)。
- 绑定邮箱(已绑定/未绑定 yongzh\*\*\*\*\*\*4@163.com;绑定/更换绑定邮箱/取消绑定,邮箱 + 邮箱验证码)。
- **注销账号**:注销条件校验(账号无未完成的订单/未结清的款项/进行中的合同/未处理的工单)→ 风险提示 4 条 → 同意《账号注销协议》→ 安全身份验证(发送验证码至 186\*\*\*\*9618)→ 二次确认弹窗「确定要注销账号吗?」(暂不注销/注销账号)→ 「注销成功」3 秒后返回登录页。
2. **地址管理**:地址卡列表(收货人姓名/联系方式/所在地区/详细地址/默认标签);+ 新增地址、编辑、删除(二次确认)、设为默认/取消默认;分页。
3. **收藏列表**:收藏的案例卡片(同 3.3 卡片),筛选面板同案例库。
4. **资质列表**:资质卡(资质类型/证书名称/证书编号/发证单位/有效期/状态:已认证、审核中、未通过);+ 新增资质/提交认证、编辑、删除(二次确认)、重新上传(未通过时);分页。
- 新增/编辑弹窗:资质类型*(SELECT:营业执照/生产许可证/体系认证/检测报告/授权书/其他资质)、证书名称*、证书编号*、发证单位*、有效期*(起止日期)、附件上传(图片/文档/压缩包,添加附件)。
5. **意见反馈**:反馈标题*、详细描述*(0/500 字)、附件上传(≤1G,预览/删除)、**提交反馈**/重置;「提交成功」提示。
6. **帮助中心**:FAQ 折叠组(1.账户与登录、2.功能使用指南、3.系统与权限,各含 Q/A)。
7. **关于我们**:平台简介、我们的使命、核心优势(4 条)、联系信息(客服热线/工作时间/平台官网链接 www.chongzizhizao.com/公司地址 山东省日照市)、版本信息(V1.0.0,更新时间 2026年09月)。
8. **专属客服热线**:电话 000-000-0000 + 工作时间(工作日 8:00-12:00 14:00-18:00)。
---
## 4. 数据字段定义(核心实体)
### 4.1 Case(案例)— `types/business/cases.d.ts`
| 字段 | 类型 | 说明 |
| --- | --- | --- |
| id | string | 案例 ID |
| title | string | 项目名称 |
| category | BusinessType | 业务类型 |
| cover | string | 封面图 |
| finishDate | string | 完成时间 |
| teamSize | number | 服务团队(人) |
| scale | ScaleRange | 规模区间 |
| industry | string | 所属行业 |
| duration | string | 项目周期 |
| clientType | string | 客户类型 |
| background / painPoints / requirements / deliverables | string | 详情富文本 |
| video | string | 视频地址 |
| isFavorite | boolean | 是否收藏 |
### 4.2 Demand(需求)— `types/business/demand.d.ts`
| 字段 | 类型 | 说明 |
| --- | --- | --- |
| businessType | BusinessType | 必填,单选(含「其他」) |
| projectName | string | 必填 |
| attachments | FileInfo[] | ≤1G |
| coreDescription | string | 必填,≤500 字 |
| expectedDuration | number | 预计开发周期(工作日) |
| budgetRange | 'lt1w' \| '1to5w' \| '5to10w' \| 'gt10w' | 预算范围 |
| userName / userPhone | string | 联系人 |
| remark | string | ≤500 字 |
| status | 'draft' \| 'submitted' | 草稿/已提交 |
### 4.3 Project(项目)— `types/business/project.d.ts`
| 字段 | 类型 | 说明 |
| --- | --- | --- |
| projectNo | string | 项目编号 |
| projectName | string | 项目名称 |
| businessType | BusinessType | 业务类型 |
| progress | number | 进度 % |
| status | ProjectStatus | 待立项/进行中/待验收/已完成/售后中/已取消 |
| submitTime / startTime / endTime | string | 时间 |
| milestones | Milestone[] | 需求确认/原型设计/开发实现/测试验收/项目交付(status + time) |
| team | TeamMember[] | 项目经理等 |
| files | FileInfo[] | 项目文件 |
| paymentPlans | Bill[] | 付款计划 |
| invoiceRecords | Invoice[] | 发票记录 |
| contractFile | FileInfo | 合同文件 |
| afterSales | AfterSales | 售后工单 |
### 4.4 Contract(合同)— `types/business/contract.d.ts`
contractNo、contractName、contractType、contractAmount、relatedProject({ id, name })、projectNo、signStatus(履行中/已过期/待签署)、signDate、effectiveDate、expiryDate、files: FileInfo[]。
### 4.5 Bill / Payment / Invoice / InvoiceTitle — `types/business/finance.d.ts`
- **Bill**:billName(含期数与比例)、billNo、tradeNo、projectName、amount、status(待支付/已支付/未到期)、createTime。
- **Payment**:method(wechat/alipay)、amount、payTime、tradeNo、qrCode、expiresAt(倒计时)。
- **Invoice**:bill(关联账单)、status(已开票/开票中/未开票)、applyTime、file。
- **InvoiceTitle**:type(企业单位/非企业单位)、title、taxNo、isDefault。
### 4.6 Message(消息)— `types/business/message.d.ts`
id、type(在线客服/状态通知/系统通知)、title、summary、content(富文本)、publishTime、isRead、attachments: FileInfo[]。
### 4.7 用户与账号 — `types/business/user.d.ts` / `types/business/profile.d.ts`
- **User**:id、nickname、avatar、phone(脱敏展示)、email(脱敏展示)、passwordModifiedAt。
- **Address**:id、receiverName、phone、region、detailAddress、isDefault。
- **Qualification**:id、type(营业执照/生产许可证/体系认证/检测报告/授权书/其他)、certName、certNo、issuer、validFrom、validTo、status(已认证/审核中/未通过)、attachments: FileInfo[]。
### 4.8 通用 — `types/api.d.ts`
- `ApiResponse<T> { code, msg, data }`、`PageResult<T> { list, total }`、`FileInfo { name, size, uploadTime, url }`。
---
## 5. 组件拆分建议
### 5.1 公共组件(`src/components/`,≥2 页面使用)
| 组件 | 使用页面 |
| --- | --- |
| AppHeader.vue | 全站(导航 + 消息铃铛 + 用户入口) |
| AppFooter.vue | 全站 |
| AppButton.vue | 全站按钮统一 |
| AppSwiper.vue | 首页 banner、业务服务卡片轮播 |
| CaseCard.vue | 案例库、首页精选、收藏列表 |
| FilterPanel.vue | 案例库、项目中心、收藏列表(筛选 + 已选条件回显) |
| SearchBar.vue | 案例库/项目/合同/账单/发票/消息列表 |
| PaginationBar.vue | 所有列表页 |
| FileList.vue | 需求填报、项目文件、售后、资质、意见反馈(文件卡 + 预览/下载/删除) |
| UploadArea.vue | 同上(拖拽/点击上传 + 1G 限制提示) |
| SmsCodeInput.vue | 登录/注册/找回密码/账号安全 |
| PasswordStrength.vue | 注册/修改密码(弱/中/强指示) |
| QrCodePanel.vue | 合同签署、扫码支付(倒计时 + 刷新) |
| StatusTag.vue | 项目状态/签署状态/账单状态/发票状态/资质状态 |
| ConfirmDialog.vue | 删除二次确认、注销确认 |
| StepForm.vue | 需求提报、申请售后(分步表单骨架) |
### 5.2 页面独有组件(`views/<page>/cpns/`)
| 页面 | 组件 |
| --- | --- |
| home | HomeWelcome.vue、HomeStats.vue、HomeQuickEntries.vue、HomeBusinessCards.vue、HomeCaseShowcase.vue、HomeServiceTabs.vue、BusinessDetail.vue |
| cases | CasesFilter.vue、CasesGrid.vue、CaseDetailHeader.vue、CaseRichText.vue |
| demand | DemandStep1Business.vue、DemandStep2Info.vue、DemandStep3Confirm.vue |
| login | LoginForm.vue、SmsLoginForm.vue、RegisterForm.vue、ResetForm.vue |
| project | ProjectFilter.vue、ProjectTable.vue、ProjectInfoCard.vue、ProjectTeam.vue、ProjectMilestones.vue、ProjectFiles.vue、ProjectFinance.vue、ProjectAfterSales.vue、AfterSalesForm.vue |
| contract | ContractTable.vue、ContractInfoCard.vue、ContractSignPanel.vue、SignSteps.vue |
| finance | FinanceOverview.vue、FinanceChart.vue、BillTable.vue、BillSummaryBar.vue、BillPayPanel.vue、PayMethodDialog.vue、PayResult.vue、InvoiceTable.vue、InvoiceTitleCard.vue、InvoiceTitleDialog.vue |
| message | MessageTabs.vue、MessageList.vue、MessageItem.vue、NoticeDetail.vue |
| service | ChatWindow.vue、ChatMessageItem.vue、ChatFileCard.vue、ChatInput.vue |
| profile | ProfileSider.vue、ProfileUserCard.vue、SecurityPanel.vue、ChangePasswordDialog.vue、UnbindAccountDialog.vue、AddressCard.vue、AddressDialog.vue、FavoritesGrid.vue、QualificationCard.vue、QualificationDialog.vue、FeedbackForm.vue、HelpFaq.vue、AboutPanel.vue、HotlinePanel.vue |
---
## 6. 待决事项(接口文档/蓝湖到位后补充)
1. 接口路径/入参出参以接口文档为准;当前仅按本 PRD 定义前端实体类型。
2. 蓝湖视觉参数(色值/字号/间距/圆角/阴影)待设计稿提供,暂以原型提取值近似。
3. 支付(微信/支付宝)与电子签章(支付宝扫码)对接方式待后端确认。
4. 「下载 APP」「报表导出」「发送邮箱」的交互细节待确认。