PRD：项目创建与管理（价目表 · 商户端）

修订记录

怎么读这份 PRD

正文按模块编排。不用通读全文，按角色跳章即可。

先读这几条（贯穿全文）

1. 本期是对 旧价目表 / 旧项目管理 的 整体重构并覆盖，不是长期并行两套。新版强调 B 端 工具属性：列表 纯信息、无列表配图装饰，一屏信息密度更高，操作更紧凑。
2. 价目分 项目 与 产品 两个 Tab；均可 分组筛选、多分组归属、行内 拖拽排序（在约束内）、左滑/长按快捷操作。
3. 项目可被会员卡权益 按名称绑定（项目桶、产品桶内 名称唯一）；绑卡后 锁定名称、可预约、删除（优惠券/商城关联亦会锁定删除）；在售/下架仍可改。列表绑卡行以名称样式区分；删除锁定在左滑按钮与行操作 Sheet 以锁标呈现。boundToCard 随模板引用 自动派生并刷新。
4. B 端改价、上下架、时长、隐藏、封面等变更需 同步客户端展示（开单侧为 实时目录/价格；推送细节【待联调确认】）；顾客端具体 UI 不在本文展开。价目产品 本期不维护库存字段（见 8.1）。
5. 会员卡建卡时「选项目 / 选产品 / 选折扣适用项目」及标题栏「管理价目表」依赖本价目数据；从权益页进入价目再返回时 刷新权益选品分组 Tab（重置为「全部」并重绘）；会员卡三步流程见 PRD-会员卡管理.md，本文只写联结面。
6. 开单选品：仅排除已下架（须 onSale）；隐藏项可选；建卡权益选品仍为 onSale && !hidden。价目产品 不限购（见 8.1）。开单过程中若价目改价导致应付变化，支付链路拦截提示（见 6.8）。
7. 原型工具栏「无数据 / 有数据」造数 仅演示，不进正式产品。接口路径标 【待联调确认】，正式接口文档 暂无交付时间；不臆造现网 URL。
8. 本期仅单店；价目管理权限：店主可编辑，店员不可编辑。

交互行为与文案以 同目录 index.html（价目表独立原型）当前表现 为准。

模块 1　背景 / 目标 / 范围 / 能力映射

读者：前端 ✓ · 后端 ✓ · 测试 ✓

1.1 背景

旧价目表 / 旧项目管理在列表中带有图片与较多装饰元素，内容不够紧凑，一屏信息量少，操作分散，不符合 B 端管理软件「找得到、改得快」的诉求。

本期在整体产品（含会员卡权益组合）对齐前提下重构价目能力：

• 工具属性更强：列表纯信息行（名称、时长/规格、价格），无列表配图堆叠、无行内状态列；
• 操作紧凑：Tab、分组轨、标题栏品牌红「+添加」文字链、左滑/长按菜单、拖拽排序集中在一屏；下架与隐藏以分区/折叠呈现；
• 市场反馈补强：拖拽排列顺序、更完整的分组管理（新建/重命名/删组不删货、多选成员、条目可多组）、隐藏 与系统「隐藏」分组；
• 与会员卡 / 开单联结：价目为选权益、折扣适用范围及 开单选品 的数据源；支持从权益页「管理价目表」往返。

1.2 目标

1.3 本期做（In）

• 价目表列表：项目 Tab / 产品 Tab、标题栏品牌红「+添加」文字链（跟 Tab 直接新建、不弹窗；无右下悬浮球）、列表底部虚线添加行、列头排序、空态（无搜索）
• 列表分区：在售区 → 「已下架 · 停售」分区 →（「全部」Tab）底部 「已隐藏 · 仅顾客端不可见」折叠（两个分区标题各带副标题以区分业务差异，规则见 §6.1.1）
• 新增 / 编辑 / 删除项目与产品（表单三段：基本信息 / 售卖设置 / 高级设置；产品含 规格选填；无库存字段；新增与编辑均为列表内就地展开，见 §6.1.1）
• 产品库存：价目侧本期不维护（见 8.1）；库存管理另模块
• 封面图选填（演示最多 1 张；标签「项目封面图（可选）」/「产品封面图（可选）」）
• 在售切换、隐藏 / 取消隐藏
• 分组：筛选 Tab（全部 / 自定义 / 隐藏）、分组管理、包含项目 / 包含产品、条目设置多分组、分组拖拽排序
• 列表拖拽排序（在售桶 / 下架桶 内；自定义分组 Tab 内可拖）
• 左滑快捷操作与长按操作 Sheet（删除锁定锁标）
• 项目绑卡锁定（部分字段）及提示文案
• 从会员卡权益页「管理价目表」进入并返回
• 开单选品 联结（在售即可，含隐藏；价目产品不限购；价目改价支付拦截见 6.8）
• B→C 同步生效的产品语义说明（无 C 端页面规格）

1.4 本期不做（Out）

• 顾客端 / 小程序预约页、开单页的完整 UI 规格（仅约定消费价目结果）
• 「库存管理」完整功能（入库/出库/盘点/流水等）：不在本期价目表；见 8.1（工作台可有入口，与价目表单字段解耦）
• 会员卡创建三步、办卡支付、退卡（见 PRD-会员卡管理.md）
• 真实图片上传 / 正式 OSS / 封面 B→C 专项验收（本期不做；原型仅为演示图）
• 原型「无数据/有数据」造数开关
• 审核流、多门店价目同步与店间隔离（本期仅单店）
• 旧价目数据迁移方案（暂无；后续或通过 AI 助手能力补齐）
• 正式接口文档交付排期（暂无具体时间）

1.5 旧 → 新能力映射（不写废弃产品名）

映射不足时以原型字段与行为为准。

模块 2　用户场景与成功标准

读者：前端 ✓ · 后端 了解 · 测试 ✓

2.1 角色

2.2 核心场景

模块 3　信息架构与页面清单

读者：前端 ✓ · 后端 了解 · 测试 ✓

价目表
 ├─ 列表（项目 Tab / 产品 Tab）
 │    ├─ 标题栏右侧品牌红「+添加」文字链（跟当前 Tab，不弹窗；无悬浮球）
 │    ├─ 分组轨（灰底白胶囊 · 可横滑 · 全部/自定义/隐藏）· 深灰齿轮
 │    ├─ 在售区 →「已下架 · 停售」分区（线在标题上方）→（全部）「已隐藏 · 仅顾客端不可见」折叠 → 底部虚线添加行
 │    ├─ 行：**点行就地向下展开**（详情即展开 · 不再跳页）· 拖拽排序 · 左滑/长按操作（产品：名称规格+价格）
 │    ├─ **行内展开区**：新增 / 详情表单（字段同三段、**不渲染小标题** + 底部「保存」），见 §6.1.1
 │    └─ 空态（保留空态 CTA；点 CTA 在**内容区就地展开**新增表单）
 ├─ 分组管理
 │    └─ 包含项目 / 包含产品（含系统「隐藏」组）
 └─ Sheets / 弹层
      ├─ 行操作 Sheet（单层贴底菜单）
      ├─ 设置分组（多选，含系统「隐藏」组）
      ├─ 分组行内展开操作条（包含项目·包含产品 / 重命名 / 删除）
      ├─ 新建/重命名分组 Dialog
      ├─ 删除分组确认
      ├─ 删除条目确认
      ├─ 放弃修改确认（展开区有未保存改动时收起）
      └─ 金额键盘（价格）

3.0 页面流（示意）

从会员卡权益页进入：

关键口径：本模块只有「价目表列表」一个页面主体 —— 新增与详情不再是独立页面，而是在列表内就地向下展开的一块区域（行内展开区，§6.1.1）。除了分组管理的两级页面（分组管理 / 包含项目·包含产品），其余全部是列表页上的层。

原型首页（v1.25）：index.html 不带参数打开 = price-list-filled（价目表 · 项目）。原先的「功能入口」演示页（?flow=hub + screen-hub）已取消 —— 它只是独立原型的入口索引，不属于产品功能；左侧导航现在只剩「价目表 / 浮层·叠加态 / 文档」三组。相应地列表页标题栏不再有返回按钮（已无上级页；从会员卡权益页进入的返回语义见 §6.8）。

功能链路演示节点（FLOW_MAP「项目创建与管理」）：price-list-empty / price-list-filled / price-list-product / price-list-action / price-list-swipe / price-list-swipe-locked / price-list-hidden-open / price-groups / price-group-members / price-group-menu / price-group-menu-product / price-group-create / price-group-rename / price-group-delete / price-item-group / price-item-group-empty / price-item-delete / price-add / price-add-product / price-edit-normal / price-edit-bound / price-edit-off-sale / price-edit-product / price-edit-product-off-sale。

深链：index.html?flow=<节点 id>（可选 &capture=1）。开单改价拦截节点 bill-pay-price-changed 归属「开单记账」分组，规格见 §6.8。

新增 / 详情类节点的落地口径（7 个节点）：price-add / price-add-product / price-edit-normal / price-edit-bound / price-edit-off-sale / price-edit-product / price-edit-product-off-sale —— 一律先落到列表页，再自动展开对应位置（新增 → 内容区末尾 / 空态位置；详情 → 该条目的行正下方），不再有独立全屏页。深链切换时会先收掉上一轮遗留的展开区，避免两条动画打架。

实现路由建议（名称可调整）：price-list（含 ?panel=add|edit&id=<条目 id> 表达行内展开区）/ price-groups / price-group-members + sheets。不再需要 price-add / price-edit 独立路由。

模块 4　状态机

读者：前端 ✓ · 后端 必看 · 测试 必看

4.1 售卖状态 onSale

在售 ──下架──► 已下架 ──上架──► 在售

• 绑卡 项目/产品：允许 改在售/下架（左滑、行操作 Sheet、详情表单 Switch 均可）。
• 项目下架时：可预约 强制关闭并锁定，直至重新在售。
• 项目隐藏时：可预约 强制关闭并锁定；取消隐藏后仍保持关闭，须商户在详情中 手动再打开（不自动恢复）。

4.2 隐藏状态 hidden

• 系统「隐藏」组：不可重命名、不可删除；Tab 排在自定义组 之后；分组管理页 不可拖拽 排序；无 ⋯ 菜单（点主行进入包含项目 / 包含产品）。
• 列表筛选：Tab「全部」主列表排除 hidden，底部提供可折叠「已隐藏」（无数量角标），展开后可查看/操作；Tab「隐藏」仅 hidden；自定义组 Tab 仅显示 非 hidden 成员。
• 展开「已隐藏」后，将折叠标题滚到列表滚动区顶部附近。
• 与预约：凡使项目 hidden=true（左滑/行操作隐藏、加入系统「隐藏」组、包含项目页勾选进隐藏组等）⇒ bookable=false；取消隐藏 不 自动打开预约。

4.3 绑卡锁定（项目为主）

绑定依据：项目/产品 名称（同桶内 trim 后唯一）出现在会员卡模板权益引用中（项目次数、折扣键、产品权益等）时，同步 boundToCard 及模板名列表。

自动刷新：boundToCard（及关联模板列表）由当前模板引用 自动派生；模板解除对某名称的引用后，下次同步/进入价目相关页即更新，无需商户手动刷新。是否落库由联调确认（见模块 7）。

产品：绑卡名称样式同项目（列表名称 is-bound 样式区分，无独立卡面图标）；在售/下架不受绑卡限制；删除若同时关联优惠券/商城则 toast「已关联会员卡/优惠券/商城，不可删除」（按实际关联动态拼接）。产品详情无预约开关，同样不展示项目类限制提示（限制一律走「点锁定字段 → toast」）。

删除锁定视觉：左滑删除钮角标小锁；行操作 Sheet 删除项旁锁标。

4.4 表单模式

4.5 分组生命周期

无组 ──新建──► 有组（可空成员）
有组 ──包含项目 / 包含产品──► 更新 itemIds（系统「隐藏」组同步 hidden）
有组 ──重命名──► 同 id 改名（桶内唯一；系统组不可）
有组 ──删除──► 组消失；条目仍在价目表；若当前筛选该组则回「全部」

条目可同时属于 多个 自定义分组；「全部」「隐藏」不是可编辑的自定义分组实体。

4.6 可见性矩阵（跨端）

顾客端可见（项目/产品）：onSale && !hidden。
开单选品（项目/产品）：onSale（含 hidden；价目产品 不限购，见 8.1）；分组轨含「全部 / 自定义 / 隐藏」。
建卡权益选品：onSale && !hidden（与开单口径不同）。
顾客端可预约（仅项目）：onSale && !hidden && bookable。

4.7 列表排序相关状态

• sortOrder：桶内顺序（在售桶 / 下架桶 两桶隔离）。
• 列头排序 catalogColSort：临时视图排序；开启时禁止拖拽。
• 「隐藏」Tab、列排序激活、或「全部」底部「已隐藏」折叠区内的条目禁止拖拽（无搜索；自定义分组内可拖）。

模块 5　交互细则 / 异常流

读者：前端 ✓ · 后端 了解 · 测试 ✓

5.1 通用

• 返回：列表返回到来源（会员卡权益页或默认首页）；子页返回上一级。
• 金额：价格走金额键盘；须为 ≥0 的有效数字；上限 999,999.99（整数部分 ≤6 位）；超限 toast「金额不能超过 999,999.99」。
• 文本：项目/产品名 ≤30；规格 ≤20；分组名 ≤20；搜索框软限制 ≤50。
• 开单购物车：单品数量在无库存上限时软封顶 999（有库存时仍以库存为准）。
• 封面图：高级设置中点选添加演示图，最多 1 张；非正式上传（无副标题文案；v1.16 起「未上传，不影响保存」已删除）。

5.2 校验失败（保存）

时长以 行内时长输入（分/时切换）为主路径；上限按最多 480 分钟（8 小时） 约束；无独立时长选择器入口（#durPickerMask 为死 UI，「不足 5 分钟」校验随 v1.28 一并删除），校验仅「未填 / 为 0 → 请填写项目时长」。
产品库存：当前原型价目表单 无库存字段，不做上表库存校验（见 8.1）。

5.3 分组异常

5.4 拖拽拦截

5.5 绑卡 / 下架 / 隐藏拦截（节选）

5.6 空态

见模块 6.1。「隐藏」Tab 空态引导左滑将条目移入隐藏。

进入空态即重绘：整表无数据时，空态块（插画 + 标题 + 说明 + CTA）必须取代列表主体出现 —— 表头、分组轨、列表行、拖拽提示条一律不出现（不允许残留进入前的列表）。

CTA 样式统一：空态 CTA 项目 / 产品同款「虚线品牌红」按钮（见 6.1 空态样式），不因 Tab 切换而改变形状、颜色、圆角、字号。

CTA 行为（v1.14）：点击空态 CTA 不跳页 —— 在内容区就地展开「新增」展开区（§6.1.1），替代空态块（表头、分组轨一并收起，列表外壳保留）。新增成功保存后：展开区收起 → 新行入列 → 由归位动效落到它该在的位置 → 高亮闪一次；此时列表已有数据，底部虚线添加行随之出现。

模块 6　功能规格

读者：前端 ✓ · 后端 了解 · 测试 ✓

下列字段、按钮、跳转均须与原型一致；视觉以原型为准。

本模块的两色分工（v1.31 起，前端必须分清）：

文字档：#1A1A1A = 主文字（标签、展开区字段值、折叠行名称与价格、时长数字框）；#333333 = --text（「已绑卡」行名、折叠条文字）；#929292 = 次级（时长、下架行、展开态标题行名、未选中单位）；#6C7279 = 未选中 Tab。

6.1 价目表列表

结构

• 标题：价目表；右侧标题栏 品牌红「+」图标 +「添加」文字链（无底色/无圆角/无胶囊按钮壳；字色与图标均为 #F32F41）
• 不弹窗 / 不选类型 Sheet
• 当前 Tab 为 项目 → 打开「新增项目」行内展开区（§6.1.1，不跳页）
• 当前 Tab 为 产品 → 打开「新增产品」行内展开区
• 「+」为 12×12 SVG（线性十字），与「添加」二字基线居中对齐
• 无右下悬浮球「+」（新建入口：标题栏文字链 + 空态 CTA + 列表底部虚线「添加项目/添加产品」行）
• Tab：项目 | 产品（独立记住各 Tab 的当前分组筛选）；选中态规格见下方「主 Tab 规格」
• 无关键字搜索（已移除搜索框）
• 空态 CTA 仍为「添加项目」/「添加产品」（跟当前 Tab）

主 Tab 规格（项目 / 产品）

① 红色不再承担「价格」语义，交给「选中态」独占（--brand-orange #FF7A45，见主 Tab 规格）。 ② 绑卡 / 下架是语义例外，实现上用 :not(.is-bound) / :not(.is-off-sale) 把它们排除在统一规则之外，各自的原声明一字不改 —— 不要用「统一规则 + !important 覆盖」的写法。 ③ 同一行内不得出现两档黑（v1.31 前名称 #000 与价格 #F32F41、名称 #000 与值 #1A1A1A 并存属历史遗留）。 - 默认排序：在售优先 → 桶内 sortOrder → 名称

空态

空态块规格（整表无数据；三类空态共用同一骨架）

行进入：点击主区域 → 就地向下展开该行的详情（不跳页，见 §6.1.1）；再次点击同一行 / 点展开区之外（表头、列表空白、别的浮层以外的地方）→ 收起。
左滑：分组 · 下架/上架 · 隐藏/取消隐藏 · 删除（锁定时角标锁）。
长按：无垂直拖动则打开行操作 Sheet（仅条目标题，无副标题；单层 picker-sheet--menu，取消在 foot）。

6.1.1 行内展开区（新增 / 编辑 / 详情）

本模块的唯一交互主体。新增与详情都不再是独立页面（v1.14 起废止全屏页），而是在列表内容区就地向下展开的一块区域。

位置

视觉形态：选中行的「向下延伸」——不是一张独立卡片，也不是全屏页、不是 Sheet。

高度预算（v1.15 新增，v1.16 收紧）：展开区高度不得超过原全屏表单的 2/3（实测已压到 40%～53%：项目详情 686→312、绑卡态 784→410、产品详情 559→312、下架态 686→312、新增 638→352、新增产品 563→352；上限 457/523）。压缩手段只有三条，且都不许丢信息：

1. 删掉题头（46px）与通知条（34px）；
2. 三个分组小标题「基本信息 / 售卖设置 / 高级设置」不再渲染（字段直接铺在灰底上）；
3. 「在售」与「可预约」由两行并为一行（proj-form-row--switches + .switch-pair）；
4. 「可预约」的副标题「打开后项目会在小程序-预约中显示」不再渲染（它原本独占一行）；这句话的信息改由点击开关后的短 toast 承担（见 §6.2 开关文案），因此不会丢信息。
5. （v1.16）封面行的副标题「未上传，不影响保存」不再渲染——它不承载限制信息、也不承担状态说明（封面本来就是选填），删掉不丢信息。
6. （v1.16）字段区顶部那 12px 留白取消（字段区贴展开区顶沿），标签改短文案、值色与图标按设计稿重排，行高与字段一个不少。
7. （v1.17）字段区去掉白底 / 圆角 / 左右 16px 边距，并删除顶部凹陷阴影 —— 展开区彻底是选中行的灰底延伸。

字段区视觉规范（v1.16 起，v1.17 修订；对齐 Figma「价目表-项目详情·普通」1258:605 人工修改稿）

表头固定与滚动容器（v1.15 新增）

滚动容器从 .page-body 下移到 #projProjectTable：.table-card 为 flex column，Tab 条 / 分组轨 / 表头都是 flex-shrink:0 的固定层，#projProjectTable 为 flex:1; overflow-y:auto（隐藏滚动条）。

• 滚动内容时 Tab 条、分组轨、表头位置一律不动（实测位移 Δ = 0.00），只有行在动；
• 表头下沿 = 列表可视区顶边：行不会钻到表头底下，展开区顶边锚定（+12）也以这条线为基准；
• 展开区的滚动定位、scrollTop 读写一律以 #projProjectTable 为准，不要再用 .page-body。

内部版式（工整基准，前端须照此实现）

展开区只有 两级左基准，所有元素必须落在其中一条线上（实测值，画布 390）：

• 标签是固定列宽 68px（覆盖 4 字标签 + 必填星号），不是内容宽 —— 内容宽会让控件左沿参差（实测曾出现 593.5 / 565.5 / 537.5 三种）。
• 所有非整行（横向）表单行：标签右沿 = 首个控件左沿，控件左沿全局唯一。
• 例外是 proj-form-row--switches：「在售」的标签与开关、「可预约」的标签与开关成对并排在同一行（第一对左沿与标签列同基准）——这一行的标签不参与上面的对齐网格判定。
• 行高 ≥ 48（触控热区 ≥ 44；--switches 行撤掉副标题后同样只剩 48）；行分隔线为 1px、左右各内缩 16、scaleY(.5) 发丝线。
• 分区标题与分区线：列表分区自上而下为「在售 → 已下架 → 已隐藏」。两个分区标题共用同一套版式 —— 同宽 388 / 同高 26 / 13px / 400 / 居中 / 内边距 0 16px，只有底色与文字色不同：已下架 · 停售 ＝ #fff 底 + --text-sec(#929292) 字（.catalog-offsale-head，不可点）；已隐藏 · 仅顾客端不可见 ＝ #EEEEEE 底 + --text(#333333) 字（.catalog-hidden-toggle，可点展开）。「仅」字不可省（下架同样对顾客端不可见，去掉「仅」后副标题反而与「已下架」同义）。
• 「已隐藏」唯一的非对称元素是折叠箭头：它在视觉上要与静态的「已下架」同款，但必须保住「可展开」线索，故只保留 14×14 折叠箭头（stroke="currentColor" → 随文字色 #333；尺寸按 13px 文字折算，与 v1.22 的「图标/文字 ≈ 1.07」比例一致），并移除原先的 16×16 眼睛图标 —— 语义已由「已隐藏」三字承担，且 16px 图标在「26px 高 + 13px 字」的标题里过重（24px 的 Tab 内图标不受影响，仍保留）。箭头收起态 rotate(180deg)、展开态 0deg，过渡 .2s ease。
• 热区（已知取舍）：该折叠条触控高度为 26px（全宽 388）。不得用伪元素外扩热区 —— 实测其上方 1px 即为「已下架」区块内的可点行、下方 12px 后即为底部「添加项目」行，外扩会直接抢走相邻元素的点击；而 26＋12 ＝ 38px 仍不足 44px，故放弃外扩。
• 分区线一律画在标题上方（16px 0 / ::before top:0，左右各内缩 16、#EBEBEB），两个分区方向必须一致；标题与它自己的内容之间不得有线。两处交界都让行放弃画线、由分区标题自己提供那一条：#projProjectTable .table-row-swipe:has(+ .catalog-offsale-block) .table-row::after{display:none}，以及 :has(+ .catalog-hidden-block) 同理（均须带 ID 前缀才生效，否则被上方的 display:block 覆盖）。两处若同时绘制会落在同一 y、叠成一条比其它发丝线更重的线 —— 注意「无已下架条目」时隐藏块与末行直接相邻，是这条规则唯一会真正命中的场景。
• （v1.17）字段区不再套白卡，因此原先「白卡级 16 + 内容级再进 16 = 32」的两级左基准合并为一级 16px。

「最佳操作位」（滚动定位）

展开时必须滚动列表，把展开区送到手指最舒服的位置。规则（滚动容器是 #projProjectTable，见上「表头固定与滚动容器」）：

落点会被物理夹住：目标 scrollTop = clamp(0, maxTop)。下面三种情况滚不动，此时只保证「整块可见」，不再追求严格居中（前端不要为此改成别的算法）：

实现要点（易错，务必照做）：展开动画是把 height 从 0 长起来，scrollHeight 会先变矮再变高，浏览器会把 scrollTop 夹回 → 面板再也回不到焦点线（实测「已下架」区块内条目偏差可达 378px）。因此：

1. 先以自然高度（未收起）量出落点并立即设 scrollTop；
2. 动画期间逐帧锁死面板顶边（每帧比对顶边偏差并补回 scrollTop）；
3. 新增态需先让新行入列并可见，再量落点。

动效（统一缓动 cubic-bezier(.22,.82,.24,1)，变量 --cip-ease）

节奏口径（v1.15）：保存反馈必须快、干净利落——三个时长整组压短（收起 240→120、归位 420→260、高亮 1200→320）。原先 1.2s 的高亮显得拖沓，用户会以为界面卡住。

• 四个时长在 CSS 与 JS 中由 --cip-open/--cip-close/--cip-flip/--cip-glow 单一来源保证一致，不得各写一份。
• prefers-reduced-motion: reduce → 全部动效直给，不做过渡（高亮与 FLIP 都不播）。
• 高亮只有 320ms，任何「等 1s 后再断言」的测试都抓不到它：验证要在动效进行中采样（is-saved-glow 出现过即可），并另断言「结束后不再挂着」。

保存反馈

FLIP 口径：展开区是贴边灰底、目标是通栏行 → ghost 必须两边同时变（高变矮 + 宽变宽），只做位移会看出穿帮。末帧 ghost 淡出（内部内容在 42% 时长处先退场，避免被压成一条），由真实行接管。

收起时机（手风琴）

• 全列表同时只能有一个展开区；切换目标时旧的一定先收再展。
• 收起路径全部要播收起动画：再点同一行 / 点展开区之外（表头、列表空白）/ 点另一行 / 点底部添加行 / 切 Tab。
• 有未保存改动时先弹确认 Dialog：「放弃修改？」这一项还有没保存的改动，收起后将不会保留。 → 「继续编辑」/「放弃」。

状态与数据口径

DOM / 类名钩子（给前端对齐用；实现风格可换，语义要留）

#catalogInlinePanel（外壳；新增态 aria-label + .catalog-inline-panel__head 可见标题为「添加项目 / 添加产品」；详情态仅 aria-label）· .catalog-inline-panel--joined（详情态，紧接选中行）· .catalog-inline-panel--add（新增态，挂在售末行下）· .catalog-inline-panel__foot（页脚）· #catalogInlineBody（表单容器）· #catalogInlineSave（保存）· .catalog-flip-ghost（新增归位 ghost）· .table-row-swipe.has-inline-panel（承载行）· .table-row-swipe.is-saved-glow（保存高亮）· .table-card.is-add-panel（空态新增）。

v1.15 起详情态不再有题头与通知条；v1.20 起新增态题头回归，并复用 #catalogInlineHead（40px，catalog.js 新增态渲染处），#catalogInlineTitle / #catalogInlineNotice 仍不渲染。

6.2 新增 / 编辑 · 项目

表单字段按下表分为三段（基本信息 → 售卖设置 → 高级设置）——v1.15 起不再渲染三段小标题，全部字段并入展开区里的一张白卡；下表的分段只表示字段归属与顺序。

分类写入默认「其他」（对用户可无独立控件）。

限制信息的展示口径（v1.15）：展开区没有提示条了。字段级的限制改为「锁定 + 点它说原因」：

• 绑卡项仍可改：价格、服务时长、封面图、在售/下架；不可改：名称、预约设置、删除。
• 锁定原因通过 data-lock-toast 属性承载，点击被锁元素时由统一处理器弹 toast —— 新增状态时只需加一条文案，不要各写一套 disabled 判断。

展开区页脚：仅「保存」（通栏主按钮，浅品牌底 #FFF2F2 + 品牌红字，v1.31 起；原实心红底白字）。删除不在展开区内 —— 走行左滑 → 行操作 Sheet → 删除，确认文案「确认删除？」「删除后不可恢复，是否继续？」。

6.3 新增 / 编辑 · 产品

与项目共用表单骨架（字段归属同三段，同样不渲染小标题）。展开区 aria-label 为「新增产品 / 产品详情」。

无时长、无预约开关、无库存字段（见 8.1）。分类默认「产品」。产品详情无项目类限制提示条（v1.15 起两者都没有提示条）。

6.4 分组管理

• 列表行：拖拽把手（系统「隐藏」组为等宽空白占位，名称与普通组左对齐）· 组名 · {n} 个项目|个产品 · 更多「⋯」（系统组为等宽空白占位，无「⋯」）
• 点整行或「⋯」 → 该行向下展开操作条（手风琴，同时只开一行）：包含项目 / 包含产品（按当前 Tab 取名，文件夹内条目图标）/ 重命名（铅笔）/ 删除（32×32 圆角 8、#BEBEBE 灰底 + 白垃圾桶、无文案）；前两项上图标下文案，图标 22×22、线与文案色 #7D7D7D
• 展开条版式（v1.21，Figma 1397:632）：整块同底 #E7E7E7；行下沿一条 0.5px rgba(0,0,0,.08) 发丝线（左右内缩 16）；操作条高 82（上 4 / 下 12）、行高 69；「包含项目·包含产品 + 重命名」整组水平居中、间距 16（单格 68.33 × 66），删除钮钉右内边距 16（32×32、垂直居中于操作带）
• 进入分组管理时一律收起（齿轮 / 返回 / 深链均同）；不默认展开任何行
• 深链：price-groups（项目维度，收起）/ price-groups-product（产品维度，收起）/ price-group-menu（项目维度 + 展开首组「洗吹」，演示节点）/ price-group-menu-product（产品维度 + 展开首组「洗护」，演示节点）—— 仅演示深链显式展开一行，正常进页仍收起
• 不再使用分组底部菜单 Sheet
• 空态：暂无分组 / 创建分组后可快速筛选价目表
• 底栏：已取消；加号 SVG +「新建」改到标题栏右侧文字链 → Dialog（最多 20 字，不可与已有分组重名）；确定后新组立即出现在分组管理列表与分组轨上（并成为当前筛选组）
• 标题栏右侧入口：加号与文字同为 14px 盒（加号 14 单位 / stroke 1.5、gap 4、右内边距 12），flex 居中即同轴；列表页「+添加」同规格（v1.22）
• 操作落地：包含项目 / 包含产品 → 对应页（自右侧滑入覆盖分组管理，300ms cubic-bezier(.32,.72,0,1)；底层分组管理左移 22% + rgba(0,0,0,.1) 蒙层）；重命名 / 删除 → 现有 Dialog（系统「隐藏」组无展开条，点主行进包含项目 / 包含产品）
• 删除确认：仅删除分组，不会删除项目/产品；确认后该组立即从分组管理列表与分组轨消失（组内条目本身不受影响，仅不再属于该组）；删的若是当前筛选组，筛选回落「全部」
• 组顺序：自定义组在分组管理页拖拽排序，松手即写入分组数据、重渲染后保持；系统「隐藏」组 固定末尾 且不可拖拽
• 实现口径（v1.32）：分组数据的唯一真源是 state.catalogGroups[bucket] 数组（getCatalogGroupsForBucket() 返回的即该数组本身）；新增 / 删除 / 排序一律写这个数组。getActiveCatalogGroups() 只作只读视图（顺序 = 自定义组… + 系统「隐藏」），供渲染与重名校验使用 —— 不得在其返回值上做 push / splice / 槽位交换（v1.32 修的正是这四处误用）
• 「隐藏」分组 Tab 展示隐藏图标（内联 16×16 / stroke 1.5 的眼 + 斜线，Tab 内 14×14）；列表底部「已隐藏」折叠 不带 数量角标；分组轨样式同列表（灰轨白胶囊）

6.5 包含项目 / 包含产品

• 标题：包含项目 · {组名}（产品 Tab：包含产品 · {组名}）；系统「隐藏」组直接叫 隐藏项目 / 隐藏产品（不再拼组名）
• 页头版式（v1.25：整页纯白 + 通栏列表）：白标题栏（44px，手机模式随缩放 48.5px）+ 白选择条（.pick-select-bar.catalog-members-bar，与列表页 Tab 条 .page-tabs 同规格）—— 选择条补一条 1px #EBEBEB 底边作为与列表的分界（白对白需要一条发丝线，取本页行分隔线同色）。该页为推栈页，顶部偏移取自 --statusbar-h（假状态栏可见时 53px、手机模式隐藏时 0）—— 不得再写死 53px，否则手机模式会多出一条空带把标题栏压低
• 列表（v1.25：去卡片壳，改通栏白列表）：#screen-p-group-members 及其 .page-body 底色 = var(--card)（原 #F7F7F7 会让白卡四周露出 16px 灰缝）；.catalog-member-card 取消 border-radius:12px / margin:0 16px 16px / overflow:hidden，改为通栏（左右 0、无圆角）；行规格不变 —— 左右内边距 16px、行高 52、padding: 14px 0、行分隔线 1px #EBEBEB（左右内缩 16）、末行无分隔线。实测桌面 / 手机 / 产品 Tab 三种情形页面灰 #F7F7F7 采样点均为 0（仅剩品牌红勾选框与底栏保存主按钮）
• 入口图标（v1.25）：folder-minus-01（Figma 图标库 Stratis UI Icons，节点 101:3599）—— 24×24 线稿、d 路径原样，stroke 折算 1.7（渲染 22×22 得 1.56px，与同族重命名 / 删除一致）
• 列出当前 Tab 桶内 全部 价目（名称 + 价格；含 hidden 条目）；已选 N · 反选 · 全选
• 选中态区分（v1.22：字感，不靠底色）：未选名称 15px/400/#8A8A8A、价格 13px/400/#B9B9B9；选中名称 15px/600/#1A1A1A、价格 13px/500/#1A1A1A；色值过渡 120ms。勾选框 18×18（未选 1.5px #C8C9CC 描边 / 选中 #F32F41 实心 + 白勾）保持原样，仅作控件确认符
• 系统「隐藏」组：勾选即移入隐藏 / 取消即取消隐藏
• 无可选项：暂无可选项目/产品
• 确定 → toast「已更新成员」→ 回分组管理（该页自右侧滑出，蒙层淡出，300ms；prefers-reduced-motion / 抓取模式为即时切换）

6.6 设置分组（条目）

• 副标题：可同时加入多个分组
• 多选 全部 分组（含系统「隐藏」）；确定 →「已更新分组」并同步 hidden
• 无自定义组：「去新建分组」（左侧加号图标）
• 点「去新建分组」→ 不离开本 Sheet，叠开「新建分组」Dialog
• 确定新建 → toast「已新建分组」→ 回到本 Sheet 勾选列表（含新组与「隐藏」；新组默认勾选，须点 Sheet「确定」才写入）
• 新组此时已真实写入分组数据（v1.32 修复前该写入会落空：toast 报成功但列表里查无此组）
• 取消 Dialog → 仍停在空态 Sheet
• 演示深链：price-item-group-empty（轨上仅「全部 / 隐藏」）

6.7 拖拽排序（列表）

仅在同一 sort-bucket 内重排并写回 sortOrder：

不可跨桶；自定义分组 Tab 内可拖（仍限同售卖态桶）。「隐藏」Tab / 「全部」已隐藏折叠内条目 / 列排序激活时拦截（文案见模块 5；无搜索）。

进入手势（两条等价入口，都要能拖）

进入待拖态后，垂直位移超过 8px 且不小于水平位移即正式起拖（水平位移超过 10px 则判为左滑，让位给快捷操作）。

拖拽中

• 被拖行脱离文档流跟随指针（不再占位、层级提升、半透明），原位插入一个等高占位块标示落点；
• 指针越过某行中线时占位块移动到该行之前 / 之后；
• 列表容器加 is-reordering（拖拽期间屏蔽其它手势）。

落位与写回

1. 松手 → 被拖行插入占位块位置，占位块移除；
2. 按该桶最终 DOM 顺序把 sortOrder 写回 0…n-1；
3. 重绘列表（在售优先 → 桶内 sortOrder → 名称）。

写回口径：只覆盖同桶可见项的相对次序；跨桶条目与当前筛除在外的条目保持原有相对顺序（仅「列排序」激活时拦截拖拽、不写回；「分组筛选」下不拦截，可在自定义分组 Tab 内正常拖拽并写回，见 §6.5）。

原型范围说明：独立原型为内存演示数据，整页刷新会重置为演示造数（见「先读这几条」第 7 条）。因此验收口径为 「同会话重绘后顺序保持」（重绘列表、切 Tab 往返）；「刷新后顺序保持」由服务端持久化 sortOrder 保证，属接口约定（模块 7）。

6.8 与会员卡 / 开单联结

会员卡权益组合、办卡支付等 不在本文展开（见 PRD-会员卡管理.md）。

模块 7　数据模型与接口约定

读者：前端 ✓ · 后端 必看 · 测试 ✓

7.1 项目 Project

7.2 产品 Product

7.3 分组 CatalogGroup

桶：project | product 两套分组互不影响。

写入口径（v1.32）：桶数组（state.catalogGroups[bucket]）是分组的唯一真源 —— 新增 / 删除 / 排序一律写该数组；getActiveCatalogGroups() 返回的只是只读视图（自定义组… + 系统「隐藏」），不得在其返回值上做结构变更（push / splice / 交换），否则改动会落空而 UI 貌似成功。系统「隐藏」组在桶内固定末尾，不可删除、不可重命名。

7.4 能力清单（路径【待联调确认】；正式文档暂无交付时间）

列表分页（常规方案）

• 默认 每页 20 条，上拉/翻页加载更多。
• 优先服务端过滤（类型/分组/排序）后再分页；客户端仅渲染当前页。【若联调改为端内全量再切片，需书面确认】
• 单店预期体量 ≤500 条目；列表首屏可交互目标作联调参考（非硬 SLA）。
• 本期仅单店数据范围。

7.5 时序（示意）

商户保存项目
  → API 更新价目
  → 写库成功
  → 异步/同步刷新顾客端可见价目【待联调确认】
  → 开单模块读取最新目录【待联调确认】
  → 客户端 toast 成功并回列表

商户从权益页打开价目表
  → 带 returnContext
  → 编辑保存
  → 返回权益页
  → 重新拉取在售目录（开单含 hidden；顾客端 / 权益仍为 onSale&&!hidden）与分组

模块 8　业务规则

读者：前端 ✓ · 后端 必看 · 测试 ✓

1. 权益选品范围：会员卡/折扣/产品权益选择器只展示 onSale=true && hidden=false。
2. 开单选品范围：仅 onSale=true（含 hidden；已下架不可选；与权益口径不同）。
3. 顾客端可见：onSale && !hidden；项目预约另需 bookable。
4. 产品库存：价目侧本期不维护；开单对价目产品不限购（见 8.1）。
5. 开单支付·价目改价：结账快照应付；打开/确认支付前重算；不一致则 Dialog「支付金额已变化」→「知道了」关支付层，留在开单详情（见 6.8）。
6. 绑卡匹配：以 名称 与模板权益引用对齐；同桶名称唯一；改名锁定避免孤儿引用；解除引用后 boundToCard 自动刷新。
7. 绑卡上下架：绑卡 不 阻止改 onSale。
8. 删组：只移除分组实体与成员关系，不删除项目/产品。
9. 多分组：同一条目可出现在多个 itemIds 中；加入系统「隐藏」组即 hidden=true。
10. 排序桶：在售 / 下架 两桶隔离；sortOrder 仅在桶内生效。
11. 下架与预约：项目下架 ⇒ bookable=false 且不可开，直到重新在售。
12. 隐藏与预约：项目隐藏 ⇒ bookable=false 且隐藏期间不可开；取消隐藏后仍为关，须手动再开「可预约」。
13. B→C / 开单同步：价目变更后客户端与开单侧按 实时目录/价格 语义生效；推送与缓存细节【待联调确认】；顾客端页面结构不在范围。
14. 列排序 vs 手动排序：列排序为临时视图；手动拖拽前须取消列排序；「隐藏」Tab 与「全部」已隐藏折叠内不可拖。
15. 产品无预约字段；项目才有「可预约」。
16. 权益选品分组 Tab：仅自定义组 +「全部」；不展示 系统「隐藏」Tab；从「管理价目表」返回后 刷新分组 Tab（重置为「全部」）。
17. 封面图：选填；演示最多 1 张；正式 OSS 本期不做。
18. 权限：店主可编辑价目；店员不可编辑。
19. 门店范围：本期仅单店。

8.1 产品库存规则（以当前原型为准）

适用范围说明：价目表产品侧本期不维护库存字段。

开单选品范围仍为 onSale（含 hidden）。支付金额因价目改价不一致时，仍走 Dialog「支付金额已变化」（FLOW：bill-pay-price-changed，归属开单分组）。

若后续产品再次在价目表恢复「选填库存」UI，须同步改本节与 §6.1 / §6.3 / §5.2 / §9.1 / 验收用例。

模块 9　文案清单与权限

读者：前端 ✓ · 后端 部分 · 测试 ✓

9.1 文案清单（须与原型一致）

导航/按钮：价目表、项目、产品、分组管理、包含项目、包含产品、新增项目、新增产品、项目详情、产品详情、保存、删除、新建分组、确定、取消、全选、反选、设置分组、下架、上架、隐藏、取消隐藏、分组、重命名、包含项目、包含产品、去新建分组、+添加、添加项目、添加产品、封面图（可选）、添加图片、在售、已下架、已隐藏、可预约、规格、时长（分钟）、价格（¥）、全部、添加项目、添加产品、知道了。 表单标签（v1.16 改短）：名称、价格、时长、规格、在售、可预约、封面图（可选）。

Toast：请输入分组名称、分组名称已存在、名称已存在、已重命名、已新建分组、已删除分组、已更新成员、已更新分组、已隐藏、已取消隐藏、已上架、已下架、保存成功、项目已创建、产品已创建、已删除、请填写项目名称、请填写产品名称、请填写有效价格、请填写项目时长、「隐藏」分组内不支持拖拽排序，请切换到「全部」或其它分组、已隐藏的项目不支持拖拽排序、请先取消列排序后再手动排序、已添加演示图片、已移除图片、仅可上传 1 张封面、项目已隐藏，取消隐藏后需手动开启可预约、项目已下架，请先开启「在售」后再设置可预约、系统分组不可重命名或删除；以及模块 5.5 绑卡/预约/删除拦截句（删除可为「已关联会员卡/优惠券/商城，不可删除」动态拼接）。

Dialog（开单支付）：标题「支付金额已变化」；正文「价目表已更新，当前应付与开单时不一致，请返回核对后再支付。」；按钮「知道了」。

Dialog/Sheet：确认删除？、删除后不可恢复，是否继续？、删除分组？、仅删除分组，不会删除项目/产品。、最多 20 字，不可与已有分组重名、可同时加入多个分组、去新建分组、长按项目可拖动排序，左滑快捷操作；分组可左右滑动。

Toast（开关与锁定）：已上架，顾客端可见 / 已下架，顾客端不可见、不可预约 / 已开启，项目会在小程序「预约」中显示 / 已关闭，小程序「预约」中不再显示 / 该项目已绑定会员卡，项目名称不可修改 / 该项目已绑定会员卡，预约设置不可修改 / 项目已下架，请先开启「在售」后再设置可预约 / 项目已隐藏，取消隐藏后需手动开启可预约。

空态：暂无项目/产品、暂无隐藏项目/产品、本组暂无项目/产品、暂无分组、创建分组后可快速筛选价目表、暂无可选项目/产品、可将价目表中的条目加入本组、左滑条目可将项目/产品移入隐藏、添加后可在选择项目与办卡中使用、添加后可在开单记账中使用、请在「管理价目表」中将项目/产品加入本组。

9.2 权限

本期交互原型按 店主 路径演示，不单独做店员只读壳。

模块 10　验收 P0 + 造数场景

读者：测试 必看

10.1 造数

正式环境自备等价数据；演示开关不进产品。

10.2 Given → When → Then（P0）

1. Given 项目 Tab 为空，When 保存合法新项目，Then 列表在售区出现，可被选项目（未隐藏时）。
2. Given 产品 Tab，When 保存带规格产品，Then 列表名称列展示「名称（规格）」；无库存列。
3. Given 产品表单，When 查看基本信息，Then 有规格（选填）、无库存输入。
4. Given 在售未隐藏产品，When 开单对该产品加购任意数量，Then 不以价目 stock 限购（catalogStockLimit 不限购）。
5. Given 列表有数据，When 滚到底部，Then 可见虚线「添加项目」或「添加产品」行（跟当前 Tab）。
6. Given 未绑卡在售项目，When 下架，Then 落入「已下架」分区；顾客端不可见；开单与权益选品均不可见。
7. Given 绑卡项目，When 尝试删除或改名称/预约，Then toast 拦截且数据不变；删除控件可见锁标。
8. Given 绑卡项目，When 改在售/下架并保存或左滑，Then 操作成功。
9. Given 绑卡项目，When 改价格并保存，Then 保存成功。
10. Given 已下架项目详情，When 查看预约开关，Then 关闭且不可开，直到重新在售。
11. Given 在售且可预约的项目，When 左滑隐藏或加入系统「隐藏」组，Then 「全部」主列表不显示但底部「已隐藏」折叠可展开；「隐藏」Tab 显示；顾客端不可见；开单仍可选；权益选品不可见；bookable=false。
12. Given 隐藏前可预约的项目，When 取消隐藏，Then 回到「全部」主列表可见（在售时顾客端可见）；「可预约」仍为关，须手动再开。
13. Given 新建分组并在包含项目页勾选多项，When 确定，Then 按组筛选只显示非 hidden 成员。
14. Given 条目属于两组，When 删除其中一组，Then 条目仍在，另一组关系保留。
15. Given 在售区两行，When 长按行主体（或按住行左侧拖拽把手）上下拖动并松手，Then 被拖行落到占位块位置；sortOrder 按桶内最终顺序写回；同会话重绘（重绘列表 / 切 Tab 往返）后顺序保持；接口侧刷新后顺序保持。
16. Given 当前「隐藏」Tab，When 拖拽，Then toast「「隐藏」分组内不支持拖拽排序，请切换到「全部」或其它分组」。
    16b. Given 「全部」Tab 已展开「已隐藏」折叠，When 拖拽折叠内条目，Then toast「已隐藏的项目不支持拖拽排序」。
17. Given 列排序激活，When 拖拽，Then toast「请先取消列排序后再手动排序」。
18. Given 从添加项目权益进「管理价目表」并新增项目，When 返回，Then 回到权益页且可选到新在售未隐藏项目，分组 Tab 刷新为「全部」。
19. Given 已下架产品，When 开单选品，Then 列表中不出现该产品。
    19b. Given 在售且已隐藏产品，When 开单选品，Then 「全部」与「隐藏」Tab 均可见且可加购；权益选品仍不可见。
20. Given 开单已选品并进入支付前，When 价目表改价导致应付与快照不一致，Then Dialog「支付金额已变化」；点「知道了」关闭支付层并留在开单详情。
21. Given 开单已选价目产品且支付成功，When 支付完成，Then 不因价目表 stock 扣减（库存管理另模块）。
22. Given 展开区时长字段未填或为 0，When 保存，Then toast「请填写项目时长」，保存被拦截。
23. Given 项目详情高级设置，When 添加第 2 张封面，Then toast「仅可上传 1 张封面」。
24. Given 「全部」列表有下架与隐藏条目，When 浏览，Then 无状态列；可见「已下架 · 停售」分区标题与「已隐藏 · 仅顾客端不可见」折叠条（无数量），二者同高 26 / 同字号 13 / 同字重 400 / 同居中 / 同内边距 0 16px、仅底色（#fff vs #EEEEEE）与文字色（#929292 vs #333333）不同；「已隐藏」只多一个 14px 折叠箭头、无眼睛图标；两条分区线各自在其标题上方（左右内缩 16），且行不再重复画线 —— 有已下架时该区段共 2 条线，无已下架条目（隐藏块与末行直接相邻）时交界处同样只有 1 条；任何情况下同一 y 上不得有 2 个画线者（否则叠成一条更重的线）。
25. Given 当前为项目 Tab 且列表有数据，When 点标题栏「+添加」，Then 不弹窗，在列表内容区就地展开「新增项目」（§6.1.1）；标题栏入口为品牌红图标+文字链（无红底胶囊按钮壳）。
26. Given 当前为产品 Tab 且列表有数据，When 点标题栏「+添加」，Then 不弹窗，在列表内容区就地展开「新增产品」。
27. Given 任意价目表列表态，When 查看界面，Then 无右下悬浮球「+」；整表无数据时可用空态 CTA 添加，标题栏「+添加」始终可用。
28. Given 同桶已存在名称「精致剪发」，When 再保存同名项目（trim 后相同），Then toast「名称已存在」且不写入。
29. Given 模板已解除对某项目名称的引用，When 进入价目列表或触发绑卡同步，Then 该条目 boundToCard 自动为 false，无需手动刷新。
30. Given 产品表单，When 查看规格输入框，Then placeholder 为「选填」；无库存输入框。
31. Given 项目 Tab 整表无数据，When 从导航 / 深链进入空态，Then 只出现空态块（插画 + 标题「暂无项目」+ 说明 + 虚线 CTA）；不出现表头、分组轨、列表行与拖拽提示条（不得残留进入前的列表）。
32. Given 空态，When 看 CTA（项目 / 产品分别查看），Then 两者为同款虚线品牌红按钮（宽 168 × 高 36、1px 虚线 #F32F41、圆角 12、透明底、品牌红字），仅文案随 Tab 变（「添加项目」/「添加产品」）。
33. Given 空态，When 点 CTA → 填名称 → 金额键盘输入并「确定」→「保存」，Then 键盘值回填表单价格；保存成功回列表并在售区出现该行；toast「项目已创建」（产品为「产品已创建」）。
34. Given 列表有数据，When 滚到底部，Then 底部虚线添加行为 1px 虚线品牌红、圆角 12、高 44、左侧 + 18px（不是浏览器默认按钮外观）。
35. Given 处于「行操作 Sheet」等自带浮层的节点，When 切换导航 / 深链到另一节点，Then 上一节点的 Sheet / Dialog 不残留；目标节点自身该开的浮层照常打开。
36. Given 任意 Tab 有数据，When 长按行主体并垂直拖动，Then 该行跟手抬起、原位留等高占位块，松手后落到占位块位置（不得出现拖拽无响应或未捕获异常）。
37. Given 价目表列表，When 看「项目 / 产品」Tab，Then 选中项同时有三重差异：文字选中橙 #FF7A45（v1.31 起；原品牌红 #F32F41）、字重 600、下方橙下划线（高 3 / 圆角 2 / 贴 Tab 条下沿 / 宽 = 文字宽 + 20，色同为 #FF7A45）；未选项为 #6C7279 400 且无下划线。仅靠文字变化区分视为不通过。
38. Given 项目 Tab 选中，When 点「产品」，Then 下划线滑动（有中间帧）到第 2 项中心并在 160ms 内到位，落点误差 <1px；不出现瞬移，也不出现两条下划线同时存在。
39. Given 产品 Tab 选中，When 刷新页面 / 从导航重新进入列表，Then Tab 条高度仍为 45、两项仍各 194 等宽（下划线绝对定位，不参与流、不撑开布局）。
40. Given 系统设定「减少动态效果」，When 切换 Tab，Then 下划线直接切换位置（无过渡），选中态仍然可辨。
41. Given 列表有数据，When 点某行主区域，Then 该行正下方就地展开详情区（不跳页、不出现新页面）；再点同一行 / 点展开区之外，Then 收起。展开区两侧贴边、灰底 #F7F7F7 与选中行同色、无圆角无描边无阴影，字段直接铺在灰底上——不得读成「另一张浮起来的白卡」，也不得有顶部凹陷阴影。
42. Given 已展开某行的详情，When 点另一行，Then 旧展开区先收起、新展开区再展开；任意时刻只有一个展开区。
43. Given 展开区高度 ≤ 可视区，When 展开，Then 上下留白相等（垂直居中）；Given 展开区高于可视区，Then 顶边贴表头下沿 +12px。Given 落点被物理夹住（选中首行 / 空态无可滚内容 / 新增区在内容末尾），Then 保证展开区整块可见即可。三种情况下均不得出现顶边被顶出可视区、或展开后位置明显偏离（含「已下架」区块内的条目）。
44. Given 展开区内改了名称/价格但未保存，When 点行头 / 点外部 / 点另一行收起，Then 弹「放弃修改？」确认；点「继续编辑」保留改动，点「放弃」丢弃。
45. Given 展开区内保存成功（详情），When 保存，Then 展开区收起（120ms）→ 列表该行立即显示新名称/新价格 → 该行高亮闪一次（320ms 内淡出；底 #F3FAF5、描边约 28% 绿，不得用过重的实心 #34C759）→ toast「保存成功」。不得出现 1s 级别的拖沓高亮。
    45b. Given 详情或新增展开区已打开，When 点价格字段，Then 打开金额键盘且展开区保持打开；输入并「确定」后价格回填；不得因点价格而退出编辑。
    45c. Given 某行已展开，When 看该行标题区，Then 不显示时长与价格（只留把手+名称）；「已隐藏」折叠块底色为 #EEEEEE，与展开区 #F7F7F7 可区分。
46. Given 空态点 CTA 打开新增展开区（表头与分组轨收起、列表外壳保留、底部虚线添加行隐藏），When 填名称 + 金额键盘「确定」+ 保存，Then 展开区收起（120ms）→ 新行入列 → 归位动效（ghost 高变矮 + 宽变宽 + 淡出，260ms）→ 新行高亮闪一次（320ms）→ toast「项目已创建」（产品「产品已创建」）；底部虚线添加行出现。
47. Given 展开区（新增或详情），When 检查内部版式，Then 表单标签为固定 68px 列宽、所有控件左沿落在同一条竖线上、行分隔线左右各内缩 16；不得出现控件左沿参差（如 4 字标签与 2 字标签各行其是）；不再有三段分组小标题。v1.16 起标签文案为 名称 / 价格 / 时长 / 封面图（可选）；v1.18 起页脚「保存」为通栏主按钮（高 48，v1.31 起为浅品牌底 #FFF2F2 + 品牌红字）。
48. Given 展开区，When 检查触控热区与高度，Then 每个表单行高 ≥ 48、「保存」按钮 ≥ 44、展开区无横向溢出；整体高度 ≤ 原全屏表单的 2/3；不再有题头、提示条与「可预约」副标题。
    48b. Given 展开区的「在售 / 可预约」开关，When 点击，Then 弹出短 toast 说明后果（已上架，顾客端可见 / 已下架，顾客端不可见、不可预约 / 已开启，项目会在小程序「预约」中显示 / 已关闭，小程序「预约」中不再显示），且状态真的翻转；Given 关掉「在售」，Then 「可预约」被连带置为关并锁定；Given 锁定态（绑卡/下架/隐藏）点开关，Then 弹的是锁定原因而不是开关文案。
49. Given 展开区已展开，When 长按承载行或按住其拖拽把手上下拖动，Then 拖拽排序照常可用（§6.7 规则不变）。
50. Given 深链 price-edit-normal / price-edit-product 等 7 个新增/详情类节点，When 进入，Then 落在列表页并自动展开对应位置（新增在内容区、详情在目标行下方）且位于最佳操作位；不得出现独立全屏页，也不得残留上一轮的展开区。
51. Given 价目表列表（有数据），When 上下滚动内容区，Then Tab 条、分组轨、表头一律不动（位移 Δ = 0），只有列表行在动；表头下沿即列表可视区顶边，行不得钻到表头底下。
52. Given 绑卡项目（原型深链 price-edit-bound 演示项），When 查看展开区，Then 名称输入框不可编辑、可预约开关压暗且不可开；点它们分别弹 toast「该项目已绑定会员卡，项目名称不可修改」/「该项目已绑定会员卡，预约设置不可修改」；点「在售」不弹锁定 toast（锁定只挂在该格上）。
53. Given 展开区（项目 / 产品的详情与新增），When 检查字段区视觉，Then 名称值 #1A1A1A Medium、价格值 #1A1A1A Medium（v1.31 起统一为单档黑；原为 #929292 灰 / #FE8D4B 橙），两行右端各有 16×16 铅笔图标（#C7C7CC、线宽 1.05、与值间距 4px），时长选中态为 #FE8B4B@10% 淡底 + #FF8A4C 字（未选中字 #929292、时长控件是唯一不受本条约束的例外）；不得再出现蓝色选中态。
54. Given 展开区，When 展开，Then 字段区与展开区顶沿齐平、同宽贴边（无白底、无圆角、无左右灰缝），顶沿有一条 0.5px #EBEBEB 发丝线（左右内缩 16，与行间分隔线同色同内缩）；不得再出现白卡或顶部凹陷阴影。
55. Given 展开区，When 查看底部「保存」，Then 是通栏主按钮（左右各 16、高 48、圆角 12）、底 #FFF2F2、字品牌红 #F32F41、图标同色（currentColor）（v1.31 起为浅底 tinted；原为实心 #F32F41 底 + 白字 + 白图标）；页脚上方有 0.5px #EBEBEB 分隔线；不得再是透明药丸红字，也不得是实心红底。Given 打开任一弹窗，Then 其「确定 / 删除」仍为实心品牌红——本条的浅底只适用于展开区保存按钮。
56. Given 项目详情展开区，When 量高度，Then 312px（字段区 240 + 页脚 12+48+12；新增态 352px ＝ 312 + 题头 40）；产品详情 / 下架态 / 新增形态同量级、绑卡态更高；封面行只有一行「封面图（可选）」，不得再有「未上传，不影响保存」。
57. Given 价目表列表行，When 检查垂直对齐，Then 名称 / 时长 / 价格在 52px 行高内垂直居中（align-items: center + line-height: 19px）；不得出现字下留白明显多于字上的视觉偏上。
58. Given 产品 Tab，When 查看列表行，Then 名称与价格在同一行、垂直居中、与表头对齐；不得因空时长格把价格挤到下一行。
59. Given 任意行展开，When 查看该行标题，Then 只显示拖拽图标 + 名称；时长与价格隐藏（已在展开区字段里）；且该名称转灰 #929292（v1.31；折叠行仍为 #1A1A1A）—— 避免与展开区字段里的项目名形成同屏两个等重黑体。
60. Given 分组管理某行已展开，When 量测展开条，Then 整块底色为 #E7E7E7、行下沿有 0.5px rgba(0,0,0,.08) 发丝线（左右内缩 16）、操作条高 82；「包含项目·包含产品 + 重命名」整组水平居中、间距 16（单格 68.33 × 66）；删除为 32×32、圆角 8、#BEBEBE 灰底 + 白垃圾桶、无文案，距卡片右沿 16；不得再是「左缩进 44 对齐组名」或红色纯图标。
61. Given 分组管理页，When 点展开条「包含项目 / 包含产品」，Then 对应页自右侧滑入覆盖分组管理（300ms），底层分组管理左移 22% 并叠 rgba(0,0,0,.1) 蒙层；不得是瞬时硬切。
62. Given 包含项目 / 包含产品页，When 点返回或「确定」，Then 该页自右侧滑出、蒙层淡出、回到分组管理且展开态已收起；系统「减少动态效果」或 Figma 抓取模式下动效降级为即时切换（功能不变）。
63. Given 分组管理某行已展开，When 读入口文案，Then 项目 Tab 为 「包含项目」、产品 Tab 为 「包含产品」（图标为 Stratis folder-minus-01 线描，22×22 渲染、stroke 折算 1.7 → 1.56px，见验收 77）；不得再出现「编辑成员」字样与双人图标。
64. Given 点该入口进入，Then 页面标题为 包含项目 · {组名}（产品 Tab 为 包含产品 · {组名}；系统「隐藏」组为 隐藏项目 / 隐藏产品）；左侧导航同样为「分组 · 包含项目」。
65. Given 包含项目 / 包含产品页同时存在已选与未选条目，When 对比二者，Then 未选名称 15px/400/#8A8A8A、价格 13px/400/#B9B9B9；选中名称 15px/600/#1A1A1A、价格 13px/500/#1A1A1A；不得再依赖整行底色/描边区分，勾选框仍为 18×18 原样。
66. Given 分组管理页与价目表列表页标题栏右侧入口，When 量测加号与文字，Then 二者同为 14px 盒、flex 垂直居中，墨迹中轴差 ≤ 0.5px；加号为 14 单位 / stroke 1.5（不得再用 12 单位 / stroke 1.8，那会让描边比 15px 文字重约 40%）。「隐藏」Tab 图标为 16×16 / stroke 1.5 的眼 + 斜线（Tab 内 14×14），线宽与重命名/删除图标成族。
67. Given 手机（iOS / Android），When 打开原型地址，Then 按 UA 自动进入全屏手机模式（无需参数）；Given 电脑浏览器，When 不加参数打开，Then 保持「左侧导航 + 390×844 手机框」桌面壳；Given 真机 UA 加 ?mobile=0（或桌面加 ?mobile=1），Then 按参数强制切换。
68. Given 手机模式，When 量测画布，Then #frame 布局宽仍为 390（--phone-w），视觉宽 = 视口宽（transform: scale(视口宽 / 390)，如 430 视口 → --mobile-scale 1.103、视觉 430.2），不得把布局改成 width:100% 拉伸；绝对定位元素（分组行删除钮、0.5px 发丝线、Tab 指示条）位置与桌面一致。
69. Given 桌面窄窗（如 390×700）或 DevTools 设备模式（不伪造真机 UA），When 打开原型，Then 不得自动进入手机模式（只认 UA / iPadOS 触屏 Mac）；横屏等极矮视口（如 844×390）走兜底等比（--mobile-scale 0.462、--mobile-h 844）居中留边且不得出现 NaN。
70. Given 手机模式聚焦输入框（如分组名称 Dialog），When 系统键盘弹出，Then --kb-h = （innerHeight − visualViewport.height）/ --mobile-scale（差值 < 80px 视为地址栏抖动、记 0）；底部 Sheet 用 padding-bottom: var(--kb-h) 抬起、居中 Dialog 用 translateY(calc(-1 * var(--kb-h))) 上移，均不得被键盘遮住；台面高用 innerHeight 而非 visualViewport.height，不得与 --kb-h 重复扣一次。
71. Given 手机模式，When 查看顶栏与底栏，Then 假状态栏（9:41）隐藏，顶部按 env(safe-area-inset-top) / --mobile-scale 避让刘海（--safe-bottom 同理按缩放折算）；When 从屏幕左缘向右滑，Then 唤出左侧导航抽屉（跟手拖拽），抽屉 z-index 400 > 蒙层 350，点蒙层或点导航项后收起。
72. Given 线上站点 https://xdean-designer.github.io/menu/，When 打开控制台，Then 无 404 / 无脚本报错（站内已有内联 SVG favicon）；index.html / base.css / shell.css / mobile-preview.js / catalog.js / app.js / amount-keypad.js / assets/** 全部 200。
73. Given 手机模式（假状态栏已隐藏），When 从分组管理点「包含项目 / 包含产品」推入，Then 该页距画布顶为 0、标题栏 top 与列表页 / 分组管理完全一致（430 视口实测三者均为 0）；不得多出一条状态栏高度的空带（旧版为 53 × scale = 58.5px）。
74. Given 桌面壳或 Figma 抓取模式（?capture=1，假状态栏可见），When 推入同一页，Then 顶部偏移仍为 53px（三种模式实测：桌面 55 / 手机 0 / 抓取 53 距画布顶）；推入动画中、退出动画中、退出后三个时点的偏移均为 0（手机）/ 53（桌面），不得闪出空带。实现须走单一来源 --statusbar-h，不得在推栈层再写死 53px。
75. Given 包含项目 / 包含产品页，When 量测选择条（已选 N · 反选 · 全选），Then 底色为白 #FFFFFF（与列表页 Tab 条 .page-tabs 同规格），不得露成页面灰 #F7F7F7；内边距 14px 16px 10px、标题 13px/600、按钮 14px/500 品牌红 #F32F41；选择条下沿有 1px #EBEBEB 分界线（v1.25 起列表改纯白，白对白需要一条发丝线）；底栏沿用通用 .bottom-bar（56px、按钮 48px）。
76. Given 不带参数打开 index.html，When 看首屏，Then 落地 price-list-filled（价目表 · 项目）、左侧导航高亮该项；不得再出现「功能入口」导航组、screen-hub 页、hub-* 样式与 openHub；?flow=hub 节点已取消（访问走既有兜底 toast「未接入: hub」）；列表页标题栏不再有返回按钮（已无上级页）。
77. Given 分组管理某行已展开，When 量测三枚操作图标（22×22 渲染）的描边与墨迹，Then 描边三者一致为 1.56px（包含项目 viewBox 24 / stroke 1.7：1.7 × 22/24 ≈ 1.56）；墨迹分别 19.16 × 16.12（包含项目）/ 18.06 × 17.25（重命名）/ 18.06 × 17.14（删除）；不得照搬 Stratis 原始 stroke: 2（渲染 1.83px，比同族重 17%）。
78. Given 包含项目 / 包含产品页（桌面 / 手机 / 产品 Tab 三种情形），When 从画布顶逐 3px 采样整页底色，Then 页面灰 #F7F7F7 采样点为 0 —— 整页只剩白 #FFFFFF 与品牌红 #F32F41（勾选框 / 底栏保存主按钮）；#screen-p-group-members 及其 .page-body 底色为 var(--card)。
79. Given 包含项目 / 包含产品页，When 量测列表，Then 列表壳通栏（相对正文内容区左右偏移 0、宽 = 内容宽；桌面经典滚动条吃掉 15px 属正常，真机为覆盖式滚动条）、无圆角（border-radius: 0）、无外边距（margin: 0）；行左右内边距 16、行高 52、padding: 14px 0、行分隔线 1px #EBEBEB（左右内缩 16）、末行无分隔线；首行顶边紧贴选择条下沿。
80. Given 价目表列表，When 检查「选中态」用色，Then 只有两处用选中橙 #FF7A45 —— ① 主 Tab（项目 / 产品）的选中文字与指示条；② 分组胶囊的选中文字（胶囊底仍为白 #FFFFFF，未选字 #6C7279）；Given「设置分组」Sheet 里的分组列表，Then 同一 .catalog-group-tab 组件、同样为 #FF7A45（两处复用，改一处两处同步）。
81. Given 价目表列表的折叠行，When 采样名称 / 时长 / 价格字色，Then 常态行：名称 #1A1A1A、价格 #1A1A1A、时长 #929292（同一行内不得出现两档黑）；Given 该行已绑卡，Then 名称仍为 #333333（语义例外）；Given 该行已下架，Then 名称与价格均为 #929292（语义例外）。Given 该行已展开，Then 标题行名称转 #929292、时长与价格隐藏。
82. Given 本次（v1.31）只改「选中态 + 展开区数值 + 保存按钮 + 保存图标」四处，When 反向断言未波及项，Then 下列元素仍为品牌红 #F32F41、不得被改成橙色：标题栏「+添加」文字链与加号图标、底部虚线「添加项目 / 添加产品」行、空态虚线 CTA、分组管理「新建分组」、必填星号 ::after、列排序激活箭头、switch.on 轨道、勾选框选中底、弹窗「确定 / 删除」实心底、左滑「删除」底。Given 展开区「保存」，Then 其字色仍是品牌红 #F32F41（底为浅底 #FFF2F2）—— 与上列同色，只有底不同。
83. Given 展开区页脚的「保存」按钮，When 检查其图标，Then 是线描「存入托盘」（arrow → line）：3 段路径、viewBox="0 0 24 24"、stroke-width="2.3"、stroke-linecap/linejoin="round"；Given 渲染尺寸，Then 图标框 16×16，有效线宽 ≈ 1.53px（与模块图标族 1.56px 同档）、墨迹 ≈ 13.0 × 13.27px（≈ 原实心软盘 13.5px，换稿不得改变视觉重量）。Given 取 getComputedStyle，Then 每条 path 的 fill 必须为 none —— 线描图形若被 fill: currentColor 命中会整体填实，故 base.css 里不得存在 .catalog-inline-save__icon path { fill: … } 这类规则；stroke 为 #F32F41（随字色）。Given 图标与文字同处 flex 行，Then 两者盒中心 y 偏差 ≤0.6px；按钮满宽 356 / 高 48 / 圆角 12 / gap 6 / 无边框无阴影均不得因换图标而变。
84. Given 分组管理页，When 点某自定义组行内展开的「删除」并在确认弹窗点「确定」，Then 该组立即从分组管理列表与分组轨上消失（state.catalogGroups[bucket] 中已移除），且 toast「已删除分组」与事实一致；Given 被删组内有成员条目，Then 这些条目本身不得被删除（仍在价目表中，只是不再属于该组）；Given 删的正是当前筛选组，Then 筛选回落「全部」；Given 系统「隐藏」组，Then 删除被拦截（toast「系统分组不可删除」）、该组仍在且仍固定末尾。项目 Tab 与产品 Tab 均须如此。
85. Given 分组管理页标题栏「新建」，When 输入名称并确定，Then 新组立即出现在列表与分组轨上、并成为当前筛选组；Given 在「设置分组」Sheet 空态点「去新建分组」新建，Then 回到 Sheet 后新组出现在勾选列表且默认勾选（仍须点 Sheet「确定」才写入成员）；Given 重命名某组，Then 组名就地更新、分组轨同步。三者均不得只出 toast 而数据未落。
86. Given 分组管理页（项目或产品 Tab），When 拖拽某自定义组到新位置后松手，Then 顺序写入分组数据并跨重渲染保持（列表 DOM 顺序与 state.catalogGroups[bucket] 顺序一致）；系统「隐藏」组仍固定末尾且不可拖拽。Given 上述删除 / 新建 / 拖拽三处实现，When 检查代码，Then 不得在 getActiveCatalogGroups() 的返回值上做结构写操作（该函数返回只读视图，每次调用都是新数组；写入一律落 state.catalogGroups[bucket]）—— 这正是 v1.32 修的缺陷模式。

模块 11　非功能（极简）

读者：前端 ✓ · 后端 ✓ · 测试 ✓

• 画布与动效对齐原型 390×844。
• 列表分页与体量见模块 7.4（默认每页 20；单店 ≤500 为预期体量）。
• 埋点：无专表；若现网统一规范另案。
• 图片正式上传 / OSS：本期不做（原型演示封面最多 1 张）。
• 本期仅单店。

模块 12　交付物

开发与测试只需 PRD + 原型。与会员卡交叉时，会员卡流程以 PRD-会员卡管理.md 为准，价目数据与锁定规则以本文为准。冲突时以原型界面为准修正 PRD。

给 AI / 研发请使用同目录 PRD-项目创建与管理.md；本页仅作阅读预览。交互以本目录 index.html 为准。