DIP1 功能原型设计说明书¶

文档编号：DOC-D01-UI / 简称：DIP1-PROTO 版本：V2.0 创建日期：2026-08-09 最近更新：2026-08-09 维护人：TL / 前端 Code Agent 设计约束：运营后台对齐 shadcn/ui + Tailwind v3.4（Next.js Web，1920/1440/1080 三档栅格）；师傅端 + 客户端对齐 React Native + Expo + NativeWind（iOS 14+ / Android 9+ 原生） 关联实现：dip1/frontend/apps/opr-admin/（运营后台 Web，端口 3000）、dip1/frontend/apps/wkr-app/（师傅端 RN）、dip1/frontend/apps/cst-app/（客户端 RN）、dip1/frontend/packages/ui/（Web+RN 共享业务逻辑层）

V2.0 重大变更：师傅端从 Next.js PWA 8 页重写为 React Native 8+ 页（原生相机/推送/离线/地图导航）；新增客户端 cst-app React Native 8 页（询价/下单/跟踪/评价/推荐全流程）；运营后台 15 页保留（仅微调）；新增 §五客户端设计 + §六 RN 技术栈选型。

一、设计总原则与视觉规范（MVP 可 80% 直接用 shadcn 默认主题）¶

1.1 品牌色板（织布鸟 WEAVELY 香港版）¶

Token	HEX	色值	应用场景
`--brand-primary`	#004046	深墨绿	主按钮 / 导航背景 / 选中 Tab
`--brand-accent`	#D4AF78	暖金色	警示 / 徽章 / NPS ≥ 9 高亮
`--brand-success`	#2a9d8f	青绿	成功 / COMPLETED / PASS
`--brand-danger`	#ef4444	红	异常池 / 5xx / NPS ≤ 6
`--brand-warning`	#f59e0b	橙	待跟进 / 超时 / 3 级告警
`--brand-bg`	#F2F0EB	米白	页面背景（对齐主仓文档风格）
`--brand-card`	#ffffff	白	卡片 / 表格行背景
`--brand-border`	#e5e7eb	浅灰	分割线 / 输入框
`--brand-text`	#1f2937	深灰	正文
`--brand-text-muted`	#6b7280	中灰	辅助文字（阶段说明）

1.2 字体¶

zh-HK：优先 "Noto Sans HK"，fallback "PingFang TC" / "Microsoft JhengHei"
英文/数字："Inter" 或 "JetBrains Mono"（代码/ID 展示）
RN 移动端（师傅端 + 客户端）：iOS 用 "PingFang TC" / Android 用 "Noto Sans TC"；英文 "Inter"（Expo Fonts 预加载）

1.3 栅格 & 断点¶

运营后台（Next.js Web）：

xs  <640px:  2 列（禁止正常访问，提示请用 PC）
sm  ≥640     4 列
md  ≥768     8 列   — 最小可用（侧边栏折叠）
lg  ≥1024   12 列   — OL 工作 1080p 基准
xl  ≥1280   12 列 + 侧栏 240px   — 常用
2xl ≥1536   12 列 + 侧栏 260px   — TL 1440p

师傅端 + 客户端（React Native 原生）：

基准 375pt（iPhone SE 第三代）— 最小适配
414pt（iPhone 14 Pro）— 主流适配
768pt+（iPad）— 大屏自适应拉伸（不做专门平板优化）
布局采用 Flexbox（RN 原生）；NativeWind 提供 Tailwind 工具类
安全区：SafeAreaView 处理刘海/底部 Home Indicator

1.4 全局布局（运营后台 Web）¶

┌────────────────────────────────────────────────────────────────┐
│ 顶栏（TopBar 64px）                                             │
│ ◉ Logo 织布鸟 WEAVELY · 香港配送+安装平台        │🔔告警  │👤账户 │
├────────────┬───────────────────────────────────────────────────┤
│ 侧栏 240px │ 面包屑 40px                                          │
│ fixed 左侧 ├───────────────────────────────────────────────────┤
│ 12 导航项  │ 主内容区（12 列栅格，padding-x: 24px py: 20px）        │
│            │                                                     │
│            │                                                     │
│            │                                                     │
└────────────┴───────────────────────────────────────────────────┘

侧栏折叠（TL 常用 1080p）：图标导航 64px 宽，tooltip 显名称。

1.5 全局布局（师傅端 + 客户端 React Native）¶

┌─────────────────────────────┐
│ 状态栏 SafeArea              │
├─────────────────────────────┤
│ 顶部 NavBar 56pt             │
│ ← 返回    订单详情     ···  │
├─────────────────────────────┤
│                             │
│   主内容 ScrollView          │
│   底部安全区 padding:80      │
│                             │
├─────────────────────────────┤
│ 底部 TabBar 64pt + Home Indicator │
│ 🏠 今日单  📋 我的单  💼 我  │
└─────────────────────────────┘

导航：React Navigation v6（Stack + Tab + Drawer 组合）
状态栏：react-native-safe-area-context 自适应刘海/状态栏
底部 Tab：@react-navigation/bottom-tabs + 自定义图标（矢量图标 @expo/vector-icons）

1.6 React Native 技术栈选型（V2.0 新增）¶

项	选型	用途
RN 框架	React Native 0.74 + Expo SDK 51（managed）	跨平台原生 App 框架
导航	React Navigation v6	Stack/Tab/Drawer 导航
样式	NativeWind v4（Tailwind for RN）	与运营后台 Tailwind 语法一致
UI 组件	自建组件库 + `packages/ui` 共享业务逻辑	MVP 不引入重型组件库，保持轻量
状态管理	Zustand + TanStack Query	轻量状态 + API 缓存/离线
离线	`@react-native-async-storage/async-storage` + `@react-native-community/netinfo`	L6 拍照离线缓存 + 网络监听
推送	`expo-notifications`	统一 APNs + FCM 推送
相机	`expo-camera` + `expo-image-picker`	原生相机 + 多选相册
地图	`react-native-maps` + deep link	应用内预览 + 一键导航
生物识别	`expo-local-authentication`	Face ID / Touch ID 登录
崩溃监控	`@sentry/react-native`	与后端 Sentry 统一
构建	EAS Build + EAS Submit	云端构建 + 自动提审
OTA	Expo Updates	JS Bundle 热更新

二、运营后台：全局导航（15 页 × 6 角色可见性矩阵）¶

导航组	菜单项	对应页面 ID	SPO	BO	TL	OL	ML	FL	默认路由
数据看板（2 页）	全局驾驶舱	DASH-01	✅	✅	✅	✅	✅	❌	`/`（TL/BO/SPO）
	OL 个人工作台	DASH-02	❌	❌	✅	✅	❌	❌	`/my-workspace`（OL 默认）
线索营销（2 页）	线索池（6 场景）	OPS-01	❌	✅	✅	✅	✅	❌	ML 默认 `/leads`
	口碑与推荐	OPS-02	❌	✅	✅	❌	✅	❌	`/referrals`
订单跟踪（3 页）	看板（6 跟踪池）	CPT-01	✅	✅	✅	✅	❌	❌	OL 默认 `/orders/board`
	订单详情	CPT-02	✅	✅	✅	✅	❌	❌	`/orders/{orderId}`（点击进入）
	全量订单列表	CPT-03	❌	✅	✅	✅	❌	❌	`/orders/list`
报价服务（2 页）	报价计算器（含历史）	QSV-01	❌	✅	✅	✅	❌	❌	`/quotes`
	报价参数与 QMD 管理	QSV-02	❌	✅	✅	❌	❌	❌	TL/BO 默认 `/quotes/params`
主数据（4 页）	客户档案	MDS-CPL	❌	✅	✅	✅	✅	❌	`/customers`
	师傅档案	MDS-WPL	❌	✅	✅	✅	❌	❌	`/workers`
	品类库	MDS-SCL	❌	✅	✅	❌	❌	❌	`/categories`
	楼宇库	MDS-BPL	❌	✅	✅	✅	❌	❌	`/buildings`
系统（2 页）	用户/角色/RBAC	SYS-01	❌	❌	✅	❌	❌	❌	TL 默认 `/admin`
	审计日志 + 可观测	SYS-02	✅	❌	✅	❌	❌	❌	TL/SPO `/admin/observability`
合计	15 页 + 1 详情		3	11	15	10	3	0	—

注：FL 师傅角色不登录运营后台，登录师傅端 H5（见 §4）。

三、运营后台 15 页详细设计（页面结构 + 字段 + 按钮行为）¶

3.1 DASH-01 全局驾驶舱（SPO/BO/TL/OL/ML 5 角色视图差异化）¶

Tab 切换：今日概览 / 7 日趋势 / 30 日对比 / 口碑

区块（顺序从上到下，2 列栅格 lg 以下变 1 列）：

① 核心 KPI 卡片（第 1 行 6 张）

卡片	计算方式	颜色规则
今日新增线索	count(created_at=today, type=lead)	与昨日同环比 Δ%（绿/红）
今日新报价数	count(quotes CONFIRMED=today)	同环比
今日完成安装数	count(L6 完工=today)	同环比
今日订单 L8 NPS 平均	avg(orders 今日 L8 NPS)	≥9 绿 / 7-8 黄 / ≤6 红
本月异常率	count(EXCEPTION_POOL)/当月总订单	≤3% 绿 / 3-6% 橙 / >6% 红
本月营收（估算）	sum(final_amount, status=COMPLETED)	与 BO 实际对账差额

② 跟踪池概览（6 池卡片，点击直接跳转对应看板列）

6 张卡片依次：POOL_L1_NEW_LEADS 数字 + 红色点 / POOL_L3_PENDING_QUOTE / POOL_L4_PENDING_ASSIGN / POOL_L6_INSTALL_TODAY / POOL_L8_PENDING_FOLLOWUP / POOL_EXCEPTION（标红边框，≥1 时抖动动画）

③ 关键趋势（折线图 3 组，7 日 / 30 日 Tab）

线索 → 报价 → 签约转化漏斗（条形：6 场景分色）
安装每品类平均实际工时 vs 基线（TL/BO 专属，SPO/OL 可折叠）
师傅 Top 10 负载 + NPS（WPL 可视化）

④ 口碑与推荐案例（右侧）

最近 3 条 NPS ≥ 9 的客户评价（节选 quote）+ 照片缩略图（可点击放大）
本月推荐奖励累计发放金额（HKD）

3.2 DASH-02 OL 个人工作台（OL 专属）¶

结构：上 = 我的今日任务（Todo 时间线）；下 = 6 池仅我跟进人的订单（Kanban 6 列简化版）

Todo 条目时间线样例：

🔴 紧急：L1 线索 "陈小姐 WhatsApp 咨询" 已 1h40min 未联系
🟠 高：L6 今日安装 4 单，第一单"陈先生 黄大仙 衣柜" 08:00 师傅打卡
🟡 中：L8 待回访 3 单（3 日内 NPS 未录）
🟢 常：QMD 参数本周六前由 BO 确认

每一条 Todo 点击 → 直接跳转订单详情对应 Tab（L1/L6/L8）。

3.3 OPS-01 线索池（6 场景 × Tab + 高级筛选）¶

结构：左侧 Tab 6 场景；顶部筛选条；表格 12 列；右侧抽屉（新建/编辑线索）。

顶部筛选条（12 条件，重置 + 查询按钮）：

跟进人（多选）/ 客户标签 / 首单来源场景 / 录入时间段 / 转化状态（NEW → CONTACTED → QUALIFIED → CONVERTED → LOST）/ 是否去重警告 / 推荐人存在 / NPS 历史高 / 联系失败次数 / 楼宇热度 / 品类意向 / 关键字（姓名/WhatsApp/电话）

表格列：

列	展示规则
复选框 + lead_id	支持批量打标 / 批量转订单 / 批量分配跟进人
客户姓名 + 头像首字	若有历史 HIGH_RECOMMEND 徽章：🎖 金标右挂
WhatsApp（脱敏）	鼠标 hover 显示完整（需权限 `cpl:pii:view`），图标可点 → 一键开 web.whatsapp.com
首单场景	彩色 Chip（SCENE01 蓝 / SCENE02 橙 / REFERRAL 金）
初步需求（品类 + 备注 1 行）	过长 tooltip 展开
跟进人	头像 + 姓名，可点击切换
录入时间	yyyy-MM-dd HH:mm（HKT）
响应时长	绿色 <2h / 橙 2-6h / 红 >6h
转化状态	5 色 chip，可手动下拉修改
跟进次数	数字 + 超链接 → 抽屉跟进记录 Tab
操作	转订单 / 跟进 / 打标签 / 流失（批量）

右侧抽屉（新建线索 3 Tab）： - Tab 1：基础信息（10 字段） - Tab 2：跟进记录（时间线 + 新建评论，支持 @人，通知飞书） - Tab 3：关联画像（CPL 自动补全，历史订单预览）

3.4 OPS-02 口碑与推荐（3 区块）¶

上 = 奖励池（列表：待发放 / 已发放 / 已失效 3 Tab；≥ 500 HKD 需 BO 审批弹窗）

中 = 推荐关系网络（Canvas 2 层 graph：中心客户 1 阶推荐 → 2 阶推荐；点击节点 → 打开客户档案）

下 = 口碑素材审批流（卡片流：L8 NPS≥9 自动候选 → 三列：待客户确认 / 待 BO 审 / 已发布）

每张候选卡片包含：安装前后对比 4 张缩略图 + 自动生成的"朋友圈文案草稿"（MVP 手填，AI 占位）+ 师傅可署名复选框。

3.5 CPT-01 看板（6 跟踪池 Kanban，核心 OL 主操作页）¶

结构：6 列水平 Kanban（1080p 可横向滚动），每列 = 跟踪池。

列结构（每列完全一致）： - 列头：池名称 + 数字徽章 + 🔍筛选列内 + ➕快速新建按钮 - 列内容：N 张卡片（每卡 = 订单概要）

┌────────────────────────┐
│ CUS:陈 🔖3次好评    💬紧急│   ← 客户姓名 + 信任徽章 + 异常标签
│ L1→L4 (当前 L4 签约)     │   ← 进度条
│ 衣柜 WARDROBE · 380+     │   ← 品类 + 报价
│ 📍元朗·村屋 2F           │   ← 地址 + 楼宇
│ 👤师傅: FL_黄 (L2) ⏰09:00│   ← 派单 + 时段
│ 跟进: OL_成          ORD-ABC123
└────────────────────────┘

- 卡片样式规则：异常池 = 红边 + 左上红斜角；今日安装 = 右上橙色"今日"角标；预约 ≥ 3 天 = 灰；完成 = 绿色勾选水印

交互：卡片可在 6 列之间拖拽（系统按目标列自动校验 L 阶段是否合规，比如 EXCEPTION_POOL → L1 允许；但 POOL_L1 → POOL_L6 直接跳拖拽后会红框提示，回滚并弹 Toast "需按阶段 L1→L2→L3… 流转，除非 TL 强开"）

3.6 CPT-02 订单详情（DIP1 最复杂页，8 阶段 × Tab）¶

顶部订单卡（全 Tab 固定顶部 sticky）：

ORD-ABC123 · 陈先生 · 9123XXXX · Whatsapp 6555XXXX · WARDROBE · ¥780
阶段进度 Timeline：🔵L1→🔵L2→🔵L3→🔵L4→🔵L5→🟢L6 安装中→⚪L7→⚪L8
状态: IN_PROGRESS · 异常: 无 · 指派: FL_黄(L2) · 跟进: OL_成 · 创建 2026-08-09
操作按钮（右侧）：⚙ 阶段强制跳(TL) / 🔖 打标签 / ⚠ 上报异常 / 📤 导出 PDF / 📋 复制订单卡

下方 8 Tab：

Tab	核心字段（每 Tab 内容）	操作按钮
👤 L1 线索	来源/创建时间/响应时长/跟进人 + 3 次联系记录时间线	编辑 + 标记联系成功/失败
📝 L2 需求	品类+型号/地址（BPL 关联）/期望时段双选/现场条件 5 复选框/门框照 9 张/客户确认截图	保存并下一阶段
💰 L3 报价	报价列表（支持多版对比）+ 右侧计算器（实时预览）+ factor 展开 + cap_price 封顶提示	新建报价 / 确认报价 / 拒绝 / BO 审批（金额≥2000 或折扣>15%）
📑 L4 签约	签约时间/付款 4 方式/状态 4 枚举/首付比例/师傅指派（DSP 弹窗，含 Top3 推荐）/合同签字照	保存并到下一阶段
🚚 L5 配送	配送 4 方式/物流单号/状态 4 枚举/损坏照/签收确认勾选	保存并下一阶段
🔧 L6 安装（核心）	师傅出发/到达时间戳 · 6S 6 项合规 6 个大 ✔ 卡片 · 入户前/过程中/完工后三类照片分区（每区 ≥ N 张） · 实际工时自动计算 + 休息时间 · 增项记录列表 · 异常记录列表	6S 重置 / 上传照片 / 提交完工
✅ L7 验收	验收结果 3 枚举 / 不合格整改列表 / 客户签字照（必传大框） / 验收时间	提交验收
🌟 L8 回访	NPS 滑块 0-10 · 5 维度复选 · 自由文本 · 自动推荐候选复选 · 自动标签（HIGH_RECOMMEND 等）	保存并完成订单

订单详情页右侧侧边栏（三 Tab，跨阶段始终可见）： 1. 🕑 操作审计时间线（谁/何时/做了什么） 2. 📎 附件汇总（从 L1→L8 所有照片/签字/视频/合同 1 处全览） 3. 💬 沟通记录（OL/FL/客户的文字 + 截图）

3.7 CPT-03 全量订单列表¶

和 DIP1-PROTO 3.3 线索池一致风格。列：

复选 + order_id + 客户 + 品类 + 楼宇 + 金额 + 当前阶段 + 状态 + 指派师傅 + 跟进人 + 创建时间 + 最后更新 + 操作。

批量：导出 CSV / 批量打标签 / 批量改跟进人 / 批量入 EXCEPTION（TL 权限）。

筛选条件比线索池多：阶段 × 8 / 状态 × 4 / 楼宇类型 × 7 / 师傅等级 × 3 / NPS 范围 / 异常类型枚举。

3.8 QSV-01 报价计算器（含历史）¶

左右 2 栏：

左侧 = 输入（6 个折叠分组）： 1. 基础参数（品类枚举 → 自动带出 base_fee/base_hours/cap_price 只读） 2. 楼宇参数（BPL 联动 / 楼层 + 是否电梯 → 自动系数） 3. 师傅等级（L1/L2/L3 → 系数，TL 可自定义 override） 4. 尺寸参数（宽/高/深 cm → 体积系数自动） 5. 增项清单（可增 N 行：描述 + 数量 × 单价） 6. 折扣与优惠（折扣率 / 旺季系数 / 渠道模板，BO 审批超阈值） 7. 版本选择（默认最新，BO 可退回旧版做对比）

右侧 = 实时预览： - 大号金额显示：¥ 780（上方小字：封顶价 1200，若超过阈值自动加红色"即将封顶"徽章） - 8 因子明细展开（每条 factor_key + factor_value + 影响金额） - 增项/折扣逐项 - 操作按钮：保存草稿 / 确认报价 / 导出 PDF / 复制报价 URL（客户临时预览页 30 天有效）

下方 = 历史报价表格（同 DIP1-SPEC F-QSV-005）。

3.9 QSV-02 报价参数与 QMD 管理（TL/BO）¶

3 Tab：

参数版本（表格：版本号/生效时间/操作人/备注）→ 点击进入 → 右侧抽屉查看 8 大类 32 因子所有系数值（只读历史）
SCL 费率配置（数据表格 + 批量导入 CSV：F-MDS-003）
校准报告（每月 TL 一键：DIP1-SPEC F-QSV-010，自动对比实际工时 vs 基线 × 按品类 → 生成建议 → 提交 BO 审批流）

3.10 MDS-CPL 客户档案¶

列表 + 详情页。列表：姓名/联系方式/首单来源/历史单量/最近 NPS/推荐数/信任徽章/标签。

客户详情（3 Tab）： 1. 画像：五维标签雷达图 + 信任徽章展示 + 推荐关系链 2 层 2. 订单：全部订单时间线（点击跳转 CPT-02）+ 生命周期曲线 3. 隐私 PDPO 合规：（TL 可见）联系方式完整查看审计日志 + 下载客户数据 + 数据删除申请（PDPO 第 10 条「被遗忘权」MVP 占位）

3.11 MDS-WPL 师傅档案¶

详情（4 Tab）： 1. 基本档案（姓名/电话/紧急联系人/入职日期/等级 L1/L2/L3 + 状态 4 枚举） 2. 技能矩阵（8 品类 × 熟练度 1-5 星） 3. 业绩与负载（本月工时/单量/NPS 均值折线图 12 个月） 4. 培训与投诉档案（表格：事件 + 处理结果）

3.12 MDS-SCL 品类库¶

主表：分类 / 英文名 / base_fee / base_hours / cap_price / 师傅等级要求 / 状态。支持子类目管理（WARDROBE → 2 门/3 门/4 门/滑门/平开门 + PAX 特殊）。

3.13 MDS-BPL 楼宇库¶

主表 + 详情：楼宇档案（地址、类型 7 枚举、楼层总数、电梯 Y/N、停车费 HKD、物业准入须知 PDF 链接）+ 楼宇订单榜。

核心功能：新订单输入地址时 2 字符开始 autocomplete（联想）→ 选中后联动 L2 和 QSV 计算。

3.14 SYS-01 用户 / 角色 / RBAC 管理（TL 专属）¶

3 子页（顶部二级导航）：

用户管理：列表（账号名/真人姓名/角色多选 Chip/所属部门/最后登录时间/状态）+ 新增用户表单（7 字段 + 角色分配）+ 重置密码 + 禁用/启用。

角色管理：固定 6 角色（SPO/BO/TL/OL/ML/FL）不可删除，可自定义描述；点击角色 → 右侧 21 条权限 21 开关（DIP1-P2 §5.1 矩阵默认值）；RLS 配置页 5 条 RLS 策略（每条 ON/OFF + 自定义 SQLWHERE 提示框，TL 可改）。

权限定义：系统固定表，可增不可改 Key，可改描述（Code Agent 用）。

3.15 SYS-02 审计日志 + 可观测（TL/SPO）¶

左 Tab： 1. 审计日志查询（20 个条件：用户/时间/操作类型/成功失败/影响记录 ID/IP；表格显示 12 列；>1 年自动归档） 2. 系统健康仪表盘（API QPS/P95/4xx+5xx 率；DB Pool 活跃/空闲；Redis 内存 hitrate；R2 存储 GB；5xx 实时告警飞书推送状态） 3. DLQ 死信队列管理（阶段 1 飞书同步失败条目：消息类型/原始 payload/失败原因/失败次数/重试按钮/批量重放/标记丢弃 → 写入审计） 4. 飞书同步状态（SCL/BPL/CPL/WPL/QSV/CPT 6 表）：最后同步时间 + 延迟秒 + 今日同步成功/失败数 + 手动"全量重同步"按钮（TL 二次确认）

四、师傅端 React Native App（8+ 页 × TabBar 3 项）¶

V2.0 重大变更：从 Next.js PWA 重写为 React Native 原生 App。新增原生能力：离线拍照缓存、推送通知跳转、原生地图导航、生物识别登录、相机深度集成。

Stack (Root)
├── AuthStack                    // 登录（账密 / Face ID / Touch ID）
│   ├── Login
│   └── BiometricSetup
├── MainTabs (Bottom Tab)        // 主界面 3 Tab
│   ├── Tab1: TodayStack         // 🏠 今日单
│   │   ├── TodayList            // 今日订单时间轴
│   │   ├── OrderDetail          // 订单详情（4 子 Tab）
│   │   ├── CheckinArrive        // 到达打卡
│   │   ├── L6SixS               // 6S 勾选（原生大卡片动画）
│   │   ├── L6Photos             // 三类照片上传（原生相机）
│   │   └── L7Sign               // 签字照 + 验收
│   ├── Tab2: MyOrdersStack      // 📋 我的单
│   │   ├── MyOrdersInProgress   // 进行中列表
│   │   └── MyOrdersCompleted    // 已完成列表（按月分组）
│   └── Tab3: ProfileStack       // 💼 我
│       ├── Profile              // 个人主页
│       ├── SkillMatrix          // 技能矩阵
│       └── Settings             // 设置（推送偏好/退出）
└── PushModal                    // 推送通知点击跳转（Modal）

4.2 8+ 页详细结构（RN 原生交互）¶

① 今日单（首页 Tab1） - 顶部 SafeArea + 师傅姓名 + 等级徽章 + 今日单量 + 本月工时进度条（Animated 平滑动画） - 中部：当前位置（react-native-maps 地图预览，点击全屏） - 下部：时间轴卡片（每条 = 今日 1 单），卡片含： - 客户地址 + 📍导航按钮（deep link 唤起 Apple Maps / Google Maps） - 预约时间 + 品类 + 订单摘要 - 底部大按钮「出发打卡」/「到达打卡」（触觉反馈 Haptics.impactAsync） - 推送跳转：收到推送（新派单/客户取消/OL 消息）→ 点击 → 直接跳转订单详情

② 我的单 - 进行中（Tab2 子页） - 下拉刷新（RefreshControl）+ 上拉加载更多（FlatList onEndReached） - 卡片字段同今日单；每张卡支持左滑操作（react-native-gesture-handler）：标记完成 / 联系客户

③ 我的单 - 已完成（Tab2 子页） - 月份分段 SectionList（2026/08 头部 + N 张完成卡片） - 每张完成卡：订单摘要 + NPS 分数 Chip（绿/黄/红，原生动画）+ 客户评价 1 行

④ 我的（Tab3） - 头像 + 姓名 + 等级徽章 + 本月 NPS 均值 Chip - 4 条数据卡片：累计单数 / 累计工时 / 平均评分 / 本月奖励（估算） - 菜单列表：技能矩阵 / 培训记录 / 申诉通道 / 客服联系（一键拨打）/ 设置 - 设置页：推送偏好开关（8 类通知逐项开关）/ 语言切换 / 退出登录

⑤ 订单详情（核心 FL 页，4 子 Tab） - 顶部 sticky 卡：客户 + 地址（📞一键电话 Linking.openURL('tel:') + 💬 一键 WhatsApp Linking.openURL('whatsapp:')） - Tab 1「任务信息」：L2 采集所有信息（只读）+ 客户备注 - Tab 2「L6 安装」：6S 6 项大卡片（未勾白边 → 勾选绿对勾 + 缩放动画 + 触觉反馈）+ 三类照片上传 + 增项/异常按钮 - Tab 3「历史记录」：L1-L5 时间线（只读，垂直 StepIndicator） - Tab 4「联系我们」：OL 电话 + 调度电话（TL 手机号），一键拨打

⑥ 到达打卡（Stack 子页） - 全屏大按钮（90% 宽、88pt 高，渐变色背景）「我已到达 📍」 - 点击：触觉反馈 + 写入 arrived_at + Toast 提示 + 自动跳转 6S 页 - 离线支持：无网络时写入 AsyncStorage 本地队列，网络恢复后自动同步

⑦ 三类照片上传（Stack 子页，原生相机） - 三段分区（入户前 / 过程 / 完工后），每段： - 已上传缩略图网格（react-native-fast-image 高性能图片）支持长按删除 - 底部大按钮 📷 调用 expo-camera 原生相机 + expo-image-picker 多选相册 - 离线缓存：照片拍摄后先存本地（AsyncStorage + 文件系统），弱网时自动重试上传（指数退避） - 压缩：上传前自动压缩为 WebP（expo-image-manipulator），减少 70% 体积 - 最低张数校验：入户前 ≥1 / 过程 ≥1 / 完工后 ≥2 → 否则"提交 L6"按钮置灰

⑧ 签字照 + 验收提交（Stack 子页） - 顶部提示：请让客户签字 → expo-camera 拍照上传（1 张预览） - 中部：验收 3 枚举选择（PASS / RECTIFY / COMPLAINT）原生 Radio 卡片 - RECTIFY → 弹出整改描述必填 + 照片（BottomSheet） - COMPLAINT → 弹出客诉描述必填 + 自动打 EXCEPTION 标签 - 底部超大按钮 ✅ 提交验收（触觉反馈 + 成功动画 + 推送通知 OL）

4.3 师傅端原生能力清单（V2.0 新增）¶

能力	原生模块	场景
推送通知	expo-notifications	新派单/客户取消/OL 消息/超时预警 4 类
离线缓存	AsyncStorage + NetInfo	L6 拍照无网时本地存储，恢复后同步
原生相机	expo-camera	L6 三类照片 + L7 签字照
多选相册	expo-image-picker	从相册批量选择补充照片
图片压缩	expo-image-manipulator	WebP 压缩减少上传体积
地图导航	react-native-maps + deep link	应用内预览 + 一键唤起 Apple/Google Maps
生物识别	expo-local-authentication	Face ID / Touch ID 快速登录
触觉反馈	expo-haptics	打卡/勾选/提交关键操作反馈
一键拨打	Linking.openURL('tel:')	联系客户/OL/调度
一键 WhatsApp	Linking.openURL('whatsapp:')	联系客户

五、客户端 cst-app React Native App（8 页 × TabBar 4 项）¶

V2.0 新增：客户端从原 Out of Scope 纳入阶段2 范围。覆盖询价→下单→跟踪→评价→推荐完整闭环，是口碑营销与推荐关系链的关键触点。

Stack (Root)
├── AuthStack                    // 登录注册
│   ├── Splash                   // 启动页
│   ├── OtpSend                  // WhatsApp 号码输入
│   └── OtpVerify                // OTP 验证
├── MainTabs (Bottom Tab)        // 主界面 4 Tab
│   ├── Tab1: HomeStack          // 🏠 首页
│   │   ├── Home                 // 品类入口 + 我的订单 + 推荐入口
│   │   ├── CategoryBrowse       // 品类浏览（8 大品类 + 子类）
│   │   ├── InquiryForm          // 询价表单
│   │   └── QuotePreview         // 报价预览（自动计算）
│   ├── Tab2: OrdersStack        // 📋 我的订单
│   │   ├── OrderList            // 订单列表（进行中/已完成）
│   │   └── OrderTrack           // 订单跟踪（L1-L8 Timeline）
│   ├── Tab3: ReferralStack      // 🎁 推荐有礼
│   │   ├── ReferralShare        // 生成推荐码/链接
│   │   └── ReferralRewards      // 我的奖励记录
│   └── Tab4: ProfileStack       // 👤 我的
│       ├── Profile              // 个人档案
│       ├── OrderHistory         // 历史订单
│       └── Settings             // 设置
└── ReviewModal                  // L8 评价弹窗（推送触发）

5.2 8 页详细结构¶

CST-01 首页（Tab1） - 顶部：Logo + 问候语 + 未读通知红点 - 搜索栏（品类/订单号搜索） - 我的进行中订单卡（若有，显示 L 阶段进度条 + 预计时间） - 品类宫格入口（8 大品类图标 + 名称：衣柜/橱柜/床/沙发/餐桌/书柜/鞋柜/其他） - 推荐有礼横幅（"推荐好友赚 ¥300" → 点击跳推荐页） - 底部：口碑案例轮播（NPS≥9 客户评价 + 安装前后对比照）

CST-02 品类浏览（Tab1 子页） - 8 大品类列表（左图右文卡片） - 点击品类 → 展开子类（如衣柜 → 2门/3门/4门/滑门/平开门/PAX） - 每个子类显示：参考价格区间 + 预估工时 + "立即询价"按钮

CST-03 询价表单（Tab1 子页，核心转化页） - 步骤式表单（StepIndicator 4 步）： 1. 品类与规格（选品类 → 子类 → 尺寸宽×高×深 cm → 数量） 2. 楼宇信息（地址 autocomplete 联想 BPL + 楼层 + 电梯 Y/N + 现场照片 ≥1 张） 3. 时段偏好（日期选择器 + 时段多选：上午/下午/晚上） 4. 联系方式（WhatsApp 号码 + 备注） - 底部「提交询价」→ 自动触发 QSV 报价预览 → 跳转报价预览页

CST-04 报价预览（Tab1 子页） - 大号金额显示（品牌色 + 动画） - 8 因子明细展开（折叠卡片） - 封顶价提示（若触发） - 操作按钮：「确认下单」/「修改需求」/「保存询价 30 天」 - 确认下单 → 创建 CPT 订单 L1 → 跳转订单跟踪页 + 推送通知 OL

CST-05 订单跟踪（Tab2 子页，核心体验页） - 顶部订单卡：订单号 + 品类 + 金额 + 状态 - L1-L8 进度 Timeline（垂直 StepIndicator，当前阶段高亮 + 动画） - 每个阶段节点：图标 + 阶段名 + 时间 + 简要说明 - 当前阶段：动态进度 + 预计下一阶段时间 - 阶段详情折叠卡（点击展开）： - L3 报价详情 / L4 师傅信息（姓名+等级+评分，保护隐私不显示电话）/ L5 配送状态 / L6 安装进度（师傅打卡时间） / L7 验收 / L8 评价 - 底部操作：联系客服（一键拨打 OL）/ 查看合同 / 取消订单（L2 前） - 推送触发：阶段流转自动推送 → 点击推送 → 直接跳转此页

CST-06 评价与 NPS（ReviewModal，L8 完工后触发） - 推送触发："您的订单已完成，请评价" → 弹出评价 Modal - NPS 滑块（0-10，原生 Slider，滑动有触觉反馈） - 5 维度评分（星级）：准时 / 专业 / 整洁 / 态度 / 质量 - 文字评价（可选，最多 500 字） - 照片上传（可选，expo-image-picker 多选，最多 6 张） - 「是否推荐给朋友」开关（Y/N，Y 则引导分享推荐码） - 提交 → 写入 CPT L8 + CPL 标签 + 推送 OL 回访

CST-07 推荐分享（Tab3） - 顶部：推荐奖励规则说明（¥100-300 阶梯） - 推荐码（大号显示 + 一键复制 Clipboard） - 分享按钮（Share.share 唤起系统分享：WhatsApp / 微信 / 短信） - 推荐链接（带 UTM param，朋友点击打开 App 或下载页） - 下部：我的推荐奖励记录（列表：被推荐人脱敏 + 订单状态 + 奖励金额 + 发放状态）

CST-08 我的（Tab4） - 头像 + 姓名 + WhatsApp 号码 + 信任徽章（若有） - 4 条数据卡片：累计订单 / 累计消费 / 推荐奖励 / 会员等级 - 菜单列表：历史订单 / 我的评价 / 推荐有礼 / 地址管理 / 设置（推送偏好/语言/退出） - 设置页：8 类推送通知开关 + 语言切换（繁/简/英）+ 隐私政策 + 退出登录

5.3 客户端原生能力清单¶

能力	原生模块	场景
推送通知	expo-notifications	询价回复/阶段流转/完工评价/推荐奖励 4 类
WhatsApp OTP	Linking.openURL('whatsapp:')	登录验证码发送
生物识别	expo-local-authentication	Face ID / Touch ID 快速登录
原生相机	expo-camera + expo-image-picker	询价现场照 + 评价照
系统分享	expo-sharing + Clipboard	推荐码分享给朋友
地址联想	BPL autocomplete API	询价地址输入联想
触觉反馈	expo-haptics	NPS 滑动 / 评分 / 提交反馈

六、关键业务交互流程（Mermaid 11 图）¶

6.1 P1：新线索 → L4 签约下单（OL 主流程）¶

flowchart LR
    A[OL 录入 L1 线索] --> B(2h 内联系<br/>3 次联系失败→流失池)
    B -->|联系成功| C(L2 填需求<br/>品类×楼宇×时段×现场)
    B -->|3 次失败| Z1["入异常池<br/>ML 打 '联系失败' 标签"]
    C --> D{楼宇库命中?}
    D -->|是| E[自动带楼宇系数+地址]
    D -->|否,新建| F[创建 BLD-ULID<br/>OL 填 7 类楼宇字段]
    E --> G[L3 跳 QSV 计算器<br/>prefill 品类+楼宇]
    F --> G
    G --> H{"金额≥2000 或 折扣>15% ?"}
    H -->|是| I[BO 飞书审批卡片<br/>BO 通过]
    H -->|否| J[OL 确认报价]
    I --> J
    J --> K[客户确认<br/>WhatsApp 截图上传]
    K --> L(L4 签约<br/>填付款方式+指派师傅)
    L -->|DSP Top3 推荐| M[OL 选定 1 师傅<br/>L4→L5 流转成功]

6.2 P2：师傅 L6 安装 → L8 完成（FL 主流程，RN 原生交互）¶

flowchart LR
    A(TAB_今日单<br/>看到 4 单) --> B(点「出发打卡」<br/>记录 departed_at)
    B --> C(到客户楼下<br/>点「到达打卡」)
    C --> D{现场条件匹配 L2?}
    D -->|严重不符| E[报异常<br/>CPT-046<br/>OL 介入]
    D -->|符合| F[6S 6 项逐项勾选<br/>穿鞋套→地面保护→工作台→垃圾→清洁→对比照]
    F --> G(📷4 类照片上传<br/>入户1/过程1/完工2)
    G --> H{增项?}
    H -->|是| I[FL 填增项 + 客户确认截图<br/>OL 24h 内核定]
    H -->|否| J[记录休息时间]
    I --> J
    J --> K[点 完工 → 记录 finished_at<br/>实际工时=到达-出发-休息]
    K --> L[客户验收<br/>📷签字照必传]
    L --> M(结果选择<br/>PASS/RECTIFY/COMPLAINT)
    M -->|RECTIFY| N[记录问题→返 L6<br/>FL 改期返工]
    M -->|COMPLAINT| O[客诉→入EXCEPTION_POOL<br/>BO 仲裁]
    M -->|PASS| P[L7 验收通过]
    P --> Q(OL 3 日内 L8 回访<br/>NPS 0~10 录入)
    Q --> R[OrderCompleted 领域事件<br/>反哺 QMD/WPL/CPL/OPS]

6.3 P3：报价 QMD 计算逻辑（后端实现顺序）¶

flowchart TD
    A[请求 POST /api/v1/qsv/calculate] --> B[加载当前参数版本<br/>默认最新生效]
    B --> C[查SCL: base_fee, base_h, cap_price]
    B --> D[查BPL: building_factor, 楼层附加, 电梯系数]
    B --> E[查WPL等级: worker_level_factor]
    C --> F["体积系数 = f(width,height,depth) 默认=1 若不填"]
    D --> G[旺季系数 peak_factor=1 或按日期表]
    E --> H[渠道模板 factor=1 或 0.9 大客户]
    F --> I[8 项累乘 factor_total = SCL×BPL×楼层×电梯×旺季×等级×体积×渠道]
    G --> I
    H --> I
    I --> J[subtotal = base_fee × factor_total + Σ增项 - 折扣]
    J --> K{cap_price ?}
    K -->|"subtotal > cap"| L["final = cap_price<br/>触发 '已封顶' 标签"]
    K -->|≤cap| M[final = subtotal]
    L --> N[生成 quote_snapshot JSON<br/>保存所有因子版本]
    M --> N
    N --> O[返回 quote_preview + factor_breakdown 明细 8 条]

6.4 P4：推荐奖励闭环（OPS 口碑营销核心）¶

flowchart LR
    A(CUS_A 推荐 CUS_B) --> B{识别方式?}
    B -->|WhatsApp 填推荐人| C[OL 手工在 OPS-01 填 referral_from]
    B -->|推荐链接访问| D[MVP 占位: 未来 UTM param 自动识别]
    C --> E[CPL: 建立推荐关系边 A→B]
    D --> E
    E --> F(CUS_B 走完 L7 PASS)
    F --> G(L8 NPS ≥ 8)
    G --> H[自动计算奖励<br/>≥¥3000单=¥300;<2000=¥100;中值¥200]
    H --> I{≥¥500?}
    I -->|是| J[BO 飞书审批]
    I -->|否| K[OL 发放列表待发放]
    J --> K
    K --> L[OL 操作 FPS 转账<br/>上传收据截图 → 状态=已发放]
    L --> M[CPL CUS_A 信任徽章 +1<br/>HIGH_RECOMMEND_CANDIDATE 打标]
    M --> N[OPS-02 口碑池候选<br/>OL 联系客户授权素材]

6.5 P5：RBAC + RLS 权限（师傅只能看自己订单）¶

flowchart TD
    A[请求 /api/v1/orders] --> B{JWT 合法?}
    B -->|否| Z1[返回 401 1001]
    B -->|是| C[解出 user_id + roles]
    C --> D{RBAC: orders:list?}
    D -->|否| Z2[返回 403 1002]
    D -->|是| E[根据角色组装 RLS WHERE]
    E --> F{role==FL?}
    F -->|是| G[WHERE assigned_worker_id = current_user.worker_id<br/>物理 RLS 策略 pg ON cpt_orders]
    F -->|否, OL/ML 等| H{指定跟进人筛选?}
    H -->|是 OL 我自己的| I[WHERE follow_up_id = me]
    H -->|否| J[可访问全部<br/>BO/TL/SPO 看全局]
    G --> K[执行 PG Query + 返回分页]
    I --> K
    J --> K

6.6 P6：数据迁移（阶段0 飞书 → PostgreSQL，⏸ 暂不实施，未来按需启动）¶

flowchart LR
    A[Cron 每 15min 巡检<br/>或 Webhook 实时触发] --> B[Feishu SDK 拉 6 表增量]
    B --> C["映射层: 飞书列名 ↔ PG 列名<br/>含 ENUM 转换映射表"]
    C --> D{去重/冲突<br/>ULID 判重?}
    D -->|更新| E["upsert(idempotency Key=飞书 record_id)"]
    D -->|新建| F[insert]
    E --> G[写 audit_sync_log<br/>success=1]
    F --> G
    G --> H{异常? 连续 3 次重试失败}
    H -->|是| I[入 DLQ + 飞书告警机器人]
    H -->|否| J[同步成功, 延迟秒数记录]
    I --> K[TL SYS-02 页面重放]

6.7 P7：异常流转机制¶

flowchart TD
    A(异常发生触发点<br/>CPT-046 L6 异常 / 配送损坏 / COMPLAINT) --> B[入 EXCEPTION_POOL 看板列]
    B --> C{异常等级<br/>TL 判定}
    C -->|L1 轻微| D[OL 当日 6h 内处理<br/>返回 L5/L6 原阶段]
    C -->|L2 中等| E[TL 介入 + BO 通知<br/>24h 内解决方案]
    C -->|L3 严重| F[SPO 周会专项汇报<br/>+ QMD 校准]
    D --> G[写 异常处理记录表<br/>exception_log]
    E --> G
    F --> G
    G --> H[客户回访优先<br/>L8 NPS 重点关注项]

6.8 P8：飞书告警通知（可观测 8 阈值）¶

flowchart TD
    A[Prometheus 指标<br/>或后台 Cron] --> B{阈值触发?}
    B -->|HTTP 5xx ≥ 3次/5min| C[机器人卡片: 🔴 服务异常 + trace_id 链接]
    B -->|CPT L6 超时 ≥2×基线| D[卡片: 🟠 安装超时 + 订单卡 + TL OL @人]
    B -->|DLQ 死信 ≥5条| E[卡片: ⚠ DLQ 5条堆积 + SYS-02 链接]
    B -->|每日对账差异≥1条| F[卡片: 🚨 飞书/PG 数据不一致 X 条 + 明细 CSV 下载]
    B -->|线索 2h 未联系 ≥3| G[卡片: 🟡 线索待跟进 Top3 + 列表链接]
    B -->|月异常率 >6%| H[卡片: 🔶 月度 KPI 预警 + BO 抄送]
    B -->|DB 备份失败| I[卡片: 🔴 DB 备份 RPO 风险]
    B -->|PG Disk ≥85%| J[卡片: 🔴 存储即将满]

6.9 P9：L6 6S 合规自动核查（AI 占位 + 后端数据校验）¶

flowchart LR
    A(FL 点击「提交 L6 完工」) --> B[后端校验 6S 全勾选?]
    B -->|否| Z1[返回 3020 CPT 校验失败 + 缺项列表]
    B -->|是| C{照片张数<br/>入户≥1/过程≥1/完工≥2}
    C -->|不足| Z2[3020 + 具体类别张数]
    C -->|通过| D{实际工时>0, 完工时间在到达之后}
    D -->|否| Z3[3020 + 时间逻辑错误]
    D -->|是| E[保存安装记录<br/>同时写 category_avg_hours 统计表]
    E --> F[阶段 3 AI 占位: 上传完工照 → 调用 AI 接口 → 检查对比照是否真实]

6.10 P10：L8 四链路数据闭环（CPT → 四库 + OPS）¶

flowchart TD
    A(L8 NPS 保存 + 订单 DONE) --> B[领域事件 OrderCompleted]
    B --> C["→ QMD: actual_hours 写入统计表<br/>QSV 校准报告基础"]
    B --> D["→ WPL: 重新计算 avg_nps + 等级校验<br/>(≥5 单才生效)"]
    B --> E["→ CPL: 打标签 HIGH/LOW_NPS<br/>信任徽章 + 推荐人奖励"]
    B --> F["→ OPS: 若 NPS≥9 自动入 WOM 素材候选<br/>+若有推荐关系 → 自动计算 reward 入待发放池"]
    C --> G[T+1 日报 BO/TL 看板自动刷新]
    D --> G
    E --> G
    F --> G

修订记录¶

版本	日期	修订人	修订内容
V1.0	2026-08-09	DT	初始化：运营后台 15 页 + 师傅端 H5 8 页 + 10 条交互流；shadcn/ui 主题 Token；Next.js PWA 技术栈
V2.0	2026-08-09	DT	原生 App 升级重写：① 师傅端从 Next.js PWA 重写为 React Native + Expo 8+ 页（原生相机/推送/离线/地图导航/生物识别）；② 新增客户端 cst-app React Native 8 页（询价/下单/跟踪/评价/推荐全流程，TabBar 4 项）；③ 新增 §五客户端设计 + §六关键业务交互流程（P1~P10 共 10 图）；④ P6 数据迁移流程标注「⏸ 暂不实施，未来按需启动」；⑤ 对齐 ADR-002/006/007/008（React Native + Expo + 客户端纳入阶段2 + 跳过阶段1）

本文件为 DIP1 功能原型设计说明书（DOC-D01-UI V2.0，自包含）。前端可直接依 §1 视觉 Token + §2 导航矩阵 + §三运营后台 15 页 / §四师傅端 RN App / §五客户端 RN App + §六 Mermaid 流程开始实施。