← 返回总入口
项目设计规范
成丰货运平台原型设计 · 2026-06-30 · 确保每次修改页面时设计行为一致
1. 项目文件结构
freight-platform/
├── index.html # 总入口导航页
├── 迭代需求归档表.html # 需求归档表
├── 项目设计规范.html # 本文件
├── shipper/
│ ├── pc/
│ │ ├── index.html # 货主PC首页
│ │ ├── waybill.html # 运单列表
│ │ ├── waybill-detail.html # 运单详情（运单信息Tab + 运单日志Tab）
│ │ ├── settings.html # 设置页（订单昵称等）
│ │ └── ship.html # 发货页
│ └── app/
│ └── index.html # 货主APP原型
├── shared/
│ └── prd/
│ ├── 订单昵称显示设置PRD.html
│ └── 运输计划功能优化PRD.html
└── iterations/
2. 色彩体系
品牌色
| 用途 | 色值 | 说明 |
|---|
| 品牌主色 | #01CB8A | PRD 标题下划线、左侧边框、链接色 |
| 品牌深色 | #00b87a | hover 状态 |
页面背景
| 用途 | 色值 |
|---|
| 全局背景 | #f5f6f8 |
| 卡片/表格背景 | #fff |
| Hero 渐变起始 | #1a2742 |
| Hero 渐变结束 | #0f2027 |
边框
| 用途 | 色值 |
|---|
| 卡片/默认边框 | #eef0f3 |
| 表格行分割线 | #f5f5f7 |
文字
| 层级 | 色值 | 用途 |
|---|
| 一级标题 | #1a1a1a | h1、卡片标题 |
| 正文 | #333 | 主要文字 |
| 二级正文 | #555 | 段落、列表 |
| 三级说明 | #888 | 描述文字 |
| 弱化 | #999 / #aaa | 日期、脚注 |
功能色
| 用途 | 背景 | 文字 |
|---|
| PC 标签 | #eff6ff | #1d4ed8 |
| APP 标签 | #f0fdf4 | #166534 |
| 小程序标签 | #fdf2f8 | #9d174d |
| 管理后台标签 | #f5f3ff | #5b21b6 |
| 已完成状态 | #e6f7ec | #0e8345 |
| 进行中状态 | #fff6e5 | #b76e00 |
| 链接默认 | — | #2563eb |
3. 字体与排版
| 层级 | 字号 | 字重 | 用途 |
|---|
| 页面标题 | 22–26px | 500–600 | h1 / hero-title |
| 章节标题 | 15–18px | 600 | h2 |
| 子标题 | 14–15px | 500–600 | h3 |
| 正文 | 13–14px | 400 | p / li / td |
| 小字/标签 | 11–12px | 400 | tag / 日期 / 描述 |
| 微字 | 10px | 400 | file-tag |
字体家族：-apple-system, "PingFang SC", "Microsoft YaHei", sans-serif
行高：正文 1.6–1.8，标题按默认
4. 圆角与间距
| 元素 | 圆角 | 说明 |
|---|
| 大卡片 | 12px | 总入口卡片、表格外层、header |
| 中卡片 | 10px | 统计卡片 |
| 标签 | 20px / 10px / 4px | 按场景选用 |
| 小元素 | 3–4px | 文件标签 |
| 间距 | 数值 |
|---|
| 页面容器内边距 | 32–40px |
| 卡片内边距 | 20–24px |
| 网格间距 | 16px |
| 表格单元格 | 12–16px |
5. PRD 文档模板
所有 PRD 统一使用 HTML 格式，章节结构如下：
- 文档信息 — 表格：文档名称/需求名称/需求编号/来源/优先级/所属端/版本号/编写人/日期 + 修订记录表
- 需求背景与目标
- 用户角色与使用场景
- 名词解释
- 业务流程图 — 泳道图（可选）
- 功能清单
- 详细功能说明
- 7.1 页面布局与字段说明
- 7.2 交互说明
- 7.3 业务规则
- 7.4 异常与边界处理
- 附录 — 原型链接等
PRD 模板特有样式：
- h1 底部
2px solid #01CB8A
- h2 左侧
4px solid #01CB8A
- 提示块（note）：背景
#fffbf0，左边框 3px solid #fac775
- 示例块（example）：背景
#f8fffb，左边框 3px solid #01CB8A
- 必填标签：背景
#fff0f0，文字 #e25050
- 可选标签：背景
#f0f5ff，文字 #378add
- 目录（toc）：背景
#f9fafb，圆角 8px
6. 链接与导航规则 ⚠️
内部页面跳转
核心规则：
- 必须使用绝对路径：
href="file:///Users/liuningning/WorkBuddy/..."
- 禁止使用 target="_blank"：预览区每点一个链接就开新标签页，越点越乱
- 禁止使用相对路径：预览区基准路径可能 ≠ 文件所在目录
外部链接
部署链接（CloudStudio 等）可以使用 target="_blank"，它们是真正的站外跳转。
返回按钮
凡是子页面（归档表等），必须有「返回总入口」按钮，指向 file:/// 绝对路径。
7. HTML/CSS 修改规范 ⚠️
修改前必做
- 完整读取 <style> 块，确认所有级联关系
- 确认修改范围：一个改动可能影响多个元素
- 检查命名冲突：不同组件可能共用类名（如
.tag）
修改后必做
- 检查两个位置同步：
freight-platform/ 和当前工作区两处都要更新
- 在预览区验证：点击每一个链接，确保能正常跳转
- 验证返回链接：从子页面点返回，确认能回到上级页面
8. 日常规则
新建需求流程
- 确认需求名称 + 需求编号
- 在
freight-platform/shared/prd/ 创建 HTML 格式 PRD
- 原型文件放在迭代目录
iterations/iter-XXX-.../
- 部署到 CloudStudio 获取外网链接
- 更新「迭代需求归档表」
- 更新
freight-platform/index.html 总入口
需求完成流程
- 原型同步到
freight-platform/shipper/pc/ / freight-platform/shipper/app/
- 更新迭代需求归档表状态
- 询问宁宁："是否将此需求同步到成丰平台项目中？"
记忆文件职责
| 文件 | 内容 | 更新时机 |
|---|
YYYY-MM-DD.md | 工作日志 + 关键决策 | 每天 / 每次实质性工作 |
MEMORY.md（工作区） | 项目触发规则 | 规则变化时 |
~/.workbuddy/MEMORY.md | 跨项目偏好 | 偏好变化时 |