MVP 功能清单与开发方案

文档 QX-MVP-2026-001　│　V1.0　│　2026-11-10　│　目标：给 agent 一份能直接开工的规格，一周内出一个能在店里演 3 分钟的 demo

1　这份文档怎么用

把下面这段直接发给 agent（连同本页 URL），它就能开工：

三条纪律，写进 agent 的 prompt 里：

1. 演示优先于完备：任何功能如果 3 分钟演示里用不到，这一版不做。
2. 不许留"开发中"占位页：做不了的入口直接隐藏，不要放一个点进去是空白页的按钮。
3. 手机优先：所有页面先在 390px 宽下可用，再考虑桌面。

2　先定 3 分钟演示脚本

MVP 的范围不是"想到什么做什么"，是被这 3 分钟倒推出来的。演示场景：老板坐在他自己的前台，你拿手机，用他店里的车、他店里的工单演。

3　MVP 功能清单

3.1　P0（必须做完，缺一个演示就断）

3.2　P1（有余力再做，只为演示加分）

3.3　这一版明确不做

财务对账 · 电子发票 · 保险理赔对接 · 配件采购单与供应商对账（只做了入库与领料，没做采购流程）· 员工提成 · 连锁总部 · 会员储值 · 微信真实支付 · 短信真实发送 · OBD/诊断仪 · 多语言（只做简体中文）· 权限体系（demo 只区分"前台/技师"两个角色）。

4　页面与路由

全部挂在 /t/:tenantId/ 下，共 8 个页面 + 1 个登录。手机优先，底部四个 Tab：工作台 / 开单 / 客户 / 我的。

4.1　每个页面必须有的四样东西

1. 骨架屏：mock 加 300ms 延迟，页面先出骨架再出数——没有骨架的 demo 看起来像网页，不像产品。
2. 空状态：每个列表都要有，文案用上面表格里的，不要写"暂无数据"。
3. 操作反馈：保存/结算后必须有 toast + 状态变化，不能点完没反应。
4. 返回和面包屑：手机端左上角返回，桌面端顶部路径，别让老板迷路。

5　数据模型

八张表，字段按 demo 够用即可；tenant_id 是所有表的第一个字段。

6　多租户方案

你的判断是对的：一店一租户，天然隔离，也天然好卖——"你的数据只有你能看到"这句话老板听得懂， 比讲"行级权限"有用。

6.1　demo 阶段（这一版）

6.2　生产阶段（demo 之后才做）

7　技术选型与约定

7.1　目录结构（强制）

src/
  main.ts
  router/index.ts          # /t/:tenantId 嵌套路由 + 守卫
  stores/                  # tenant.ts  order.ts  customer.ts
  mock/
    db.ts                  # 种子数据：3 个租户 × 全量
    api.ts                 # 统一出口：get/post，300ms 延迟，按 tenant 隔离
  components/              # 8 个基础组件
  pages/
    Login.vue  Dashboard.vue  NewOrder.vue  OrderDetail.vue
    OrderList.vue  Customers.vue  CustomerDetail.vue  Reminders.vue  Settings.vue
  styles/tokens.css

7.2　组件清单（只做这 8 个）

8　给 Agent 的开发任务

分五个迭代，每个迭代跑通再进下一个。每次交付都要给一个能打开的链接，不许只给代码。

9　验收清单

十二条，逐条对，不允许"基本完成"。

10　假数据规格

种子数据决定 demo 像不像真的。三个租户，一个是他演示用的"主店"，另两个用来演示隔离。

工单要有真实感：项目名用行业说法（小保养、四轮定位、更换前刹车片、空调清洗、变速箱油）， 金额落在 180–2,800 之间，不能全是整数；车牌用粤 B/粤 S 开头；客户名用"张先生/李女士"这类称呼。 今日 8 台车里，要包含 1 台事故车、1 台只做洗车、1 台待结算超 3 天。

11　API 契约（已实现）

这一版不是"先 mock、后补接口"。后端已经写完并在线跑着，前端照这份契约对接，后面不用重做。 写 mock 只是为了让你在没有网络时也能点，数据结构必须和真接口一模一样。

11.1　通用约定

11.2　演示账号（种子数据已在库里）

验证码在演示环境填任意 6 位数字即可。t1 里有 24 个客户、28 台车、46 张工单（含今天 8 张）、37 条到期提醒， 车牌从 粤B12000 起，可直接用来演。

11.3　接口清单

11.4　三个关键调用（下面是真实返回）

① 登录

POST /api/v1/auth/login
{"phone":"13800000001","code":"123456"}

{"ok":true,"data":{"token":"d3e0b41d…","expires_at":"2026-11-17 11:46:51",
 "user":{"id":1,"name":"前台小周","role":"front"},
 "tenants":[{"id":"t1","name":"鑫达汽修（宝安店）","city":"深圳"}]}}

② 输车牌带出（演示的"哇"时刻）

GET /api/v1/t/t1/vehicles/lookup?plate=粤B12000

{"ok":true,"data":{
 "found":true,
 "vehicle":{"plate":"粤B12000","brand":"大众","model":"朗逸","mileage":20000,
            "last_service_at":"2026-05-23 05:47:30","next_due_at":"2026-11-19"},
 "customer":{"id":1,"name":"张伟","phone":"13710000000","level":"普通",
             "total_cents":4000,"visits":3},
 "last_order":{"no":"T00001","status_text":"待施工","total_cents":56000},
 "last_items":["小保养（全合成机油+机滤）","四轮定位"]}}

这一条回来，前台不用问一句"您贵姓"，页面直接显示"张先生，上次 5 月 23 日保养，已经 6 个月了"。 整个 demo 的说服力，一半在这个接口上。

③ 结算（会同时写客户累计和下次提醒）

POST /api/v1/t/t1/orders/261110009/settle
{"discount_cents":2000,"pay_method":"微信"}

{"ok":true,"data":{"no":"261110009","total_cents":56000,"discount_cents":2000,
 "paid_cents":54000,"pay_method":"微信",
 "customer_total_cents":54000,"customer_visits":1,"next_due_at":"2027-05-09"}}

返回里的 next_due_at 就是"下次保养提醒"的日期，前端直接显示在结算成功页上。 一单结算 = 客户档案 + 累计消费 + 未来提醒，三件事一次做完，这是老板最能感知的价值。

11.5　多租户怎么验（当场就能证明）

老板最常问的一句是"我这店的数据别人看不看得到"。不用解释，敲给他看：

# 用 t1 前台的令牌，去访问 t2 的数据
curl -H "Authorization: Bearer <t1的token>" \
     https://ssa.agent2.0755xzb.club/api/v1/t/t2/dashboard

{"ok":false,"error":{"code":"TENANT_FORBIDDEN","message":"无权访问该租户的数据"}}   # 403

越权是服务端拦的，不是前端藏起来的。这句话比任何"数据安全"承诺都硬。

11.6　前端怎么接（不要绕过这一层）

错误码到界面的映射（写死在 http.ts 里，别散落在页面）：

12　手机与平板布局

你说得对，这一版前端要兼顾手机和平板——因为前台用手机，老板看店用平板， 店里墙上挂一台 iPad 比给老板装个 App 更现实。但两端的版式不是"放大缩小"，是两套信息密度。

12.1　三档版式

工单与客户两个模块已按这张表实现：834 起左列表右详情（点击不跳页，选中行左侧高亮）， 手机端退回单列并在标题栏给一个返回键。

12.2　手机端（390 宽）必须守的六条

1. 底部安全区：Tab 与提交栏加 padding-bottom: env(safe-area-inset-bottom)，iPhone 上不被小横条压住。
2. 输入不缩放：输入框字号 ≥16px，否则 iOS 聚焦时页面自己放大，老板会以为页面坏了。
3. 键盘遮挡：聚焦输入框时 scrollIntoView({block:'center'})，别让金额输入框藏在键盘后面。
4. 点得到：所有可点区域 ≥44×44，一行里不放两个小按钮。
5. 单手：主操作放右下或底部，左上角只放返回。
6. 不横滚：宽表格在容器里 overflow-x:auto，页面本身绝不能横向滚动。

12.3　平板端（834 / 1194）必须守的四条

1. 不要拉伸：卡片和表单单行最宽 720，否则 iPad 横屏上一行字横跨 1000px，眼睛找不到下一行。
2. 列表点选，不跳页：右栏原地换内容，选中行左侧加 3px 主色竖条——这是平板和手机最大的体验差别。
3. 横竖屏都要能用：834×1194 与 1194×834 都测；横屏时双栏，竖屏时也双栏（不要退回单列）。
4. 触控与鼠标共用：hover 效果只在 @media (hover:hover) 里生效，否则平板上点完状态就卡住。

12.4　演示设备清单

本文档 V1.0，与需求说明书（35 条 FR）、开发设计文档、界面规范、AI 能力方案配套使用； 本阶段只取其中 P0 子集。文档编号 QX-MVP-2026-001。

← 需求说明书（完整 35 条）　界面规范 →