当需要把「填字段→算价格→出报价单」的流程做成应用时，用…

适用于任何「配置输入→规则计算→生成可交付文档并需评审」的业务流程（报价、估价、资格审核、法律计算等），把电子表格+邮件审批的流程升级为结构化应用。

适用场景

解决思路

1. 先判断是否真的是 CPQ 形态：必须同时满足四条——(1) 用户收集结构化输入决定结果；(2) 有业务规则或计算逻辑把输入转成交付物；(3) 输入与定稿之间存在评审/审批关卡，或交付物需经干系人复核；(4) 工作产物需要交接给客户、内部干系人、监管机构或下游系统。缺第 1 条→是仪表盘；缺第 2 条→是数据录入表单；缺第 3 条→按 CPQ 模式做但跳过 Approve 段；缺第 4 条→是个人计算器。四条都不满足就不要硬套，改用 frontend-design 原则从任务描述和 DOMAIN.md 构建。
2. 识别领域类型：Product 域（配置可售产品/服务，价格是核心计算，输出为含行项目、总额、税、条款的报价单）还是 Calculator/intake 域（输入案件/申请人信息，套用指南/规则/费率表，输出为含输入、计算值、免责声明的汇总报告）。
3. 满足 Tier 1 非协商标准（每个 CPQ 构建都必须有）：(1) 行项目直接内联编辑——电子表格式表格，可加行、改任意单元格、总额实时更新，不要「配置表单→加入报价→构建报价表→编辑」的往返；(2) 捆绑/必选子产品——父产品需要子组件时（如工业设备需选电机、连帽衫需选印花方式、托管服务需选档位），子选择作为父配置的一部分，行项目显示为一条内聚条目，绝不拆成两行；(3) 约束规则可见——requires/excludes/recommends 规则必须对用户可见并显示规则 ID 和理由，不能静默执行；(4) 折扣栈显示计算过程——每层折扣单独成行，展示原价、各层折扣金额、净价，数学透明；(5) 实时报价汇总——小计、税、总计随编辑实时更新，不要「点击计算」按钮；(6) 品牌化报价文档——含客户 logo、行项目表、总额、条款、免责声明的 PDF/打印视图，质量要达到真实企业会发出的水准；(7) 多级审批路由——至少两级审批（如销售配置→经理复核→老板批准），按 DOMAIN.md 的干系人图做角色路由，支持按请求类型分支；(8) 多报价管理——报价列表带状态指示、筛选/排序，可点进任意报价编辑，不能只有单报价工作区；(9) 保存/加载/克隆报价——localStorage 持久化，支持新建、保存、加载、克隆；(10) 基于角色的视图与操作门控——不同角色看到不同内容，审批人看到批准按钮，敏感数字（毛利、成本）对非审批角色隐藏。
4. 按 DOMAIN.md 信号决定是否构建 Tier 2 能力：引导式销售（分步问答）、批量/阶梯定价、客户可见的只读报价链接、订阅/续约处理、同一构建中多种定价模型、按客户类型的报价文档模板。
5. Tier 3 能力（AI 建议报价、报价版本与修订追踪、订阅计费与按比例分摊、CRM/ERP 集成、电子签名、税务引擎、多币种、自助配置门户、Deal Room、原生移动端）只在完成总结中提及为后续工作，不在原型中构建。
6. 完成总结必须包含：本原型包含什么（逐条确认 Tier 1 能力或说明为何省略某项）、为本领域构建了哪些 Tier 2 能力及原因、本原型不包含什么（列出相关 Tier 3 项）、从原型到生产需要补充什么（真实认证、CRM/ERP 集成、电子签名、真实 PDF 生成等）。
7. 遵守模板契约：模板已提供 SidebarProvider/Sidebar/SidebarContent/SidebarInset/SidebarTrigger，SidebarContent 为空是落地区；本技能负责填充 SidebarContent（按所选布局的导航）、品牌槽（客户 logo 和公司名）、header 右侧集群（多角色时在用户菜单前加角色切换 DropdownMenu）、<Outlet /> 中的路由组件。不要添加第二个 Sidebar，不要把品牌块放进 SidebarContent，不要在路由组件内挂载 MainLayout（会导致重复侧边栏/头部），不要重接 SidebarProvider。
8. 选择段落结构：SMB 直接编辑模型默认三段——Edit Quote（内联编辑所有行项目和客户信息的主工作区）、Approve（复核与批准）、Quote Document（只读可打印的品牌化交付物）。当配置与行项目组装由不同角色完成时用四段——Configure、Build Quote、Approve、Quote Document。Calculator 域用 Submission Details、Calculation、Lawyer Review、Final Report。无评审关卡则跳过 Approve；交付物不是文档则替换 Quote Document；配置前有发现阶段则在 Edit Quote 前加 Discover/Intake。按实际工作流选段数，不要为凑数而增删。
9. Edit Quote 段用 Excel 式行项目表作为主工作区：每行一个行项目，单元格可内联编辑，点「+ Add Line」加行，行操作菜单可删除/克隆，每行计算 qty × unit price - discount，表尾计算小计、折扣栈、税、加粗总计。产品域必需列：# / Description / Configuration / Qty / List Price / Discount / Net Price / Line Total / Actions。客户信息、付款条款、有效期、备注放在行项目表下方同一页内联，不要单独路由或步骤。
10. 捆绑/必选子产品行为：添加父产品时自动提示选择必选子项；行项目显示为「[父产品] — [必选子项] — [变体]」一条内聚条目；价格聚合（父基础价 + 子加价）；未选必选子项前不能保存该行；显示可见规则指示「[组件名] selection required (BR-001)」。
11. 约束规则行为：requires 规则阻止保存直到满足，内联显示「Required: [说明]」；excludes 规则阻止无效组合，内联显示「Cannot combine X with Y because [理由]」；recommends 规则作为软建议显示「Customers often add Z with this. Add?」；每条规则显示规则 ID（BR-001、BR-002）以便溯源。
12. 按配置复杂度选择产品配置器模式：Pattern A 内联可展开行——2-4 个独立属性、无级联，点击行展开显示属性选择器，填完折叠并在 Configuration 列显示摘要；Pattern B 侧抽屉带垂直步骤条——4-7 个属性、允许级联、配置耗时 <30 秒，点击行从右侧滑出覆盖约 40% 屏幕的抽屉，左侧垂直步骤条显示各配置层级，步骤在依赖满足时可点击、否则置灰，上游变更时清空下游选择并弹确认 toast，Save 提交、Cancel 丢弃；Pattern C 全页配置器——8+ 属性、含可视化元素、耗时 >30 秒，点击 Configure 导航到 /quotes/{id}/lines/{lineId}/configure，顶部水平步骤指示器、中间配置主体、右侧摘要/预览栏。拿不准时：简单产品用 A，工业设备/带选项服务用 B，真正复杂的配置器才用 C。
13. 级联依赖规则（Pattern B 和 C）：(1) 上游未选时下游步骤显示为禁用，不要让用户点进空的上游步骤；(2) 上游选择变更时清空下游选择并确认「Changing capacity from 5 ton to 10 ton will reset motor and hoist selections. Continue?」；(3) 每步显示规则依据「Available motors are filtered based on your 5 ton capacity selection (BR-007)」；(4) 级联只剩一个有效选项时自动预选并标注「(only option available based on previous selections)」。
14. 配置提交后，行项目的 Configuration 列显示组装好的配置摘要（如「Industrial Lift — 5 ton, 40ft span └─ Standard motor, Type 2 hoist, 480V controls, festoon system」），带「Edit configuration」链接重新打开配置器。不要把每个属性都做成表格列，超过 2-3 个属性就不可扩展。
15. 折扣栈模式（有折扣时 Tier 1 必须）：每个折扣单独成行，显示折扣类型、百分比或金额、扣除的美元金额；折扣按叠加顺序应用（批量→促销→手动）；手动折扣超过 DOMAIN.md 阈值时触发审批路由；用户能看到扣了什么、为什么，没有隐藏公式。折扣审批阈值：低于阈值可直接应用，达到/超过阈值可应用但报价进入 Pending Approval 状态，路由到该折扣级别授权的角色。
16. 多级审批链模式（Tier 1 必须）：从 DOMAIN.md 的 Stakeholder Map 推导审批链——单审批人→简单关卡；顺序审批人→链；条件审批人→按报价属性路由。UI 中可见地展示链（✓ 已提交 / ✓ 已批准 / ○ 待批准），每个审批人在队列中看到报价（「Awaiting My Approval」筛选），可批准/拒绝/要求修改，动作推进或中止链，拒绝/修改捕获评论供前后角色可见。角色切换器让用户以任意审批人身份查看队列。按 DOMAIN.md 路由规则实现条件路由（如维护请求→服务经理、检查请求→现场主管、所有报价由老板终审），在 Approve 段显式展示路由逻辑。
17. 选择布局：默认 list/detail——SMB CPQ 用户总有多个报价在飞，需要看队列并钻入单个报价；列表视图侧边栏放筛选、角色切换、+ New Quote；详情视图侧边栏放段落导航（Edit Quote / Approve / Quote Document）或顶部 tabs，顶部有返回列表链接。Calculator 域可用 calculator-style 单列布局（输入表单 + 内联输出面板 + 提交复核）。单报价工作流（罕见）用 single-page。拿不准用 list/detail。
18. 右侧 Quote Summary 面板用可折叠侧边栏（shadcn Sidebar side="right" 或 Sheet），按段落设默认状态：Edit Quote 展开、Approve 展开、Quote Document 折叠，用户可随时通过 header 触发按钮切换。
19. 报价生命周期指示分两个关注点：(1) 工作流状态——在标题旁放状态 Badge（Draft 灰、Awaiting Approval 琥珀、Approved 绿、Rejected 红、Sent/Finalized 蓝）；4+ 可见状态时可在标题下加水平状态流（实心圆=已完成、空心带填充=当前、空圆=未来，待批准阶段显示审批人姓名）。(2) 视图导航——详情页顶部用 Tabs 表示对等视图（Edit Quote / Document / Approval / History），Tab 可用性规则：Edit 始终可用；Document 至少有一个行项目前禁用；Approval 仅在报价处于审批状态或有审批历史时可见；History 在有状态变更时可见。不要显示空 Tab 或「coming soon」Tab。
20. 只在真正向导式流程（4+ 严格顺序步骤、每步只做一次、有自然终点）才用垂直步骤条，且保留给配置器抽屉而非应用外壳。面包屑只用于层级导航，不能替代阶段导航。单页工作流只用状态 Badge。不要为填充布局而加 Tab 条——只有一个 Tab 就没有 Tab。
21. 报价文档（最终输出）按真实文档对待，质量门槛：如果作为「报价/报告」邮件发给客户会尴尬，就不算完成。从上到下：(1) 文档头两列——左为品牌 logo（带 onError 回退到着色首字母方块，绝不用裸 img 标签）、公司名、地址；右为文档标题、参考号（如 Q-2026-0001）、文档日期、有效期。(2) Prepared-for 块——收件人姓名、联系邮箱、客户公司，视觉权重高。(3) 内容块——产品域用行项目表（# / Description / Configuration / Qty / Unit Price / Line Total）；calculator 域用输入表 + 结果表。(4) 总额/汇总块——产品域右对齐总额栈含完整折扣数学；calculator 域突出显示主要计算值或值域（Low/Mid/High 三卡布局）。(5) 条款/免责声明块——产品域放付款条款、币种、有效期；calculator 域放 DOMAIN.md 的强制法律/监管免责声明。(6) 审批链块——展示审批历史（✓ 审批人姓名、角色、日期）。(7) 状态 Badge。(8) 页脚——小字、联系信息、如需签名行。文档视图只读，仅允许「Back to Edit Quote」「Print」「Download PDF」（原型中为带 toast 的占位动作）。
22. 多角色时实现 RBAC：从 DOMAIN.md 的 User Roles 或 Stakeholder Map 播种 localStorage；角色切换器为 header 中单个 DropdownMenu，触发器显示当前角色 + badge；视图门控——不同角色默认看到不同列表筛选（审批人看「Awaiting My Approval」，编制人看「My Drafts」）；操作门控——审批按钮只对授权角色显示；字段门控——敏感数字（成本、毛利）对非审批角色隐藏；路由可见性——角色处理特定工作类型时显示相关路由信息。DOMAIN.md 只有一个角色或无角色时省略角色切换器，不要编造角色填充 UI。权限不足时用行动导向文案：「Switch to the [approver role] role to [action]」或「This action requires the [approver role]. Contact [name] for approval.」，不要用无解释的禁用按钮。
23. 按 shadcn/ui 组件映射表实现：行项目表用 Table + TableHeader/TableBody/TableFooter；可编辑数字单元格用 Input type="number"；可编辑下拉用 Select；配置单元格用自定义 popover/drawer；行操作用 DropdownMenu（垃圾桶图标触发，选项 Edit/Duplicate/Remove）；加行按钮用 Button variant="outline" 放在表下；状态徽章用 Badge；角色切换用 DropdownMenu；右侧可折叠栏用 Sidebar side="right" 或 Sheet；审批链用带状态图标的自定义列表；报价列表用 Table 或行列表，上方放状态筛选 chips；筛选用 chip group / Select；确认对话框用 AlertDialog；toast 用 Sonner / toast()；报价文档用打印样式 article（print:border-0、品牌头、总额栈）；折扣行用内联 label/value，折扣行用 muted 色。
24. 按确定性映射规则从 DOMAIN.md 生成配置：领域类型检测（有带价格/选项/配件的产品→product；有带规则和指南/公式的输入字段→calculator；两者都有→hybrid 取主导；否则 ambiguous 默认 product 并在总结中注明）；段落数决策（同角色做配置+行管理+审批→3 段；不同角色→4 段；无评审关卡→跳过 Approve；交付物非文档→替换 Quote Document）；布局决策；实体→可配置项映射（产品域：可售产品/服务/零件→config.data.products[]，设 id/name/category/basePrice/pricingSource/options/requiredChildren/optionalChildren；calculator 域：输入字段→config.data.inputSections[]，分组并设 id/label/type/required/validation）；关系→规则映射（requires→error 级可见规则；recommends→info 级建议；excludes→error 级阻止；includes child→requiredChildren 捆绑）；折扣栈映射（每种折扣类型→discountTypes[] 条目，含 id/label/type/rate/conditions；有审批阈值→approval-required 规则）；审批链映射（从 Stakeholder Map 和路由规则→approvalChain，有路由规则则建条件路由，DOMAIN.md 描述终审人则追加，在 Approve 段可见展示）；状态模型→工作流映射；品牌→主题映射（companyName、primaryColor、accentColor、logoUrl 带 onError 回退、mode="light"）；报价设置映射（产品域：currency、taxEnabled 仅当 DOMAIN.md 提到税、taxLabel、taxRate、defaultTerms、markup、quoteFormat；calculator 域：formulas、outputFormat、disclaimers）；角色映射（每个角色→config.roles[] 条目，含 id/label/permissions/viewFilters/fieldVisibility，出现在审批链中则标记为审批人，只有一个角色则省略切换器）。
25. 处理边界情况：实体无价格→pricingSource="tbd" 并加入 openQuestions；关系缺理由→message="[source] [rel] [target] — rationale not captured"；实体无法分类→跳过并加入 openQuestions；DOMAIN.md 有 Open Questions→复制到 config.metadata.openQuestions；只有一个角色→创建默认角色并省略切换器；产品域无定价→markup=0 并加入 openQuestions；calculator 域无计算公式→用占位公式构建并加入 openQuestions；DOMAIN.md 提到折扣但无审批阈值→用 15% 作为「requires approval」默认值。
26. 使用业务规则模板：产品依赖（hard requires）、产品推荐（soft）、产品排除、捆绑/必选子项（requires-child，selectionMode: required-one-of）、折扣阈值审批门（approval-required，discount.percentage >= 0.15）、多级审批链（approval-chain，按 requestType 条件路由 + 终审人）、计算器公式（computes）。实际配置中把占位名替换为 DOMAIN.md Stakeholder Map 中的真实姓名。
27. 参考垂直预设：Manufacturing/BOM（Product，List/Detail，捆绑+折扣栈+多级审批）、Wholesale/Distribution（Product，List/Detail，批量阶梯+折扣栈+客户定价）、Services/Integrator（Product，List/Detail，设备+人工+材料捆绑+审批链）、Legal/Compliance（Calculator，Calculator-Style + List/Detail，公式计算+强制免责声明+律师复核队列）、Financial/Insurance（Calculator，Calculator-Style + List/Detail，费率表+资格规则+范围输出）、Assessment/Eligibility（Calculator，Calculator-Style，评分模型+阈值规则+推荐输出）。
28. 完成前验证所有 Tier 1 标准：直接内联编辑、捆绑/必选子项（配置器模式匹配复杂度）、约束规则可见（含理由和规则 ID）、折扣栈（可见数学、分层计算、无隐藏公式）、实时报价汇总、品牌化报价文档（logo、行项目、总额、条款、审批链、专业打印布局）、多级审批路由（从 DOMAIN.md 推导并可见展示）、多报价管理（列表带筛选、可钻入详情）、保存/加载/克隆（localStorage）、基于角色的门控（视图筛选、操作门控、敏感字段隐藏）、报价生命周期指示（Tabs 做视图导航 + 状态 Badge 做状态，4+ 状态时加水平状态流）。任何 Tier 1 缺失则构建不完整，完成前修复。
29. 同时验证常见实现 bug：无重复侧边栏（路由到详情视图数 Sidebar 组件应为 1）；路由内未挂载 MainLayout（路由渲染在 <Outlet />）；app.css 和 ThemeProvider 默认都设为 light 模式；所有 logo 处使用 BrandMark 组件（无裸 <img>）；货币用 Intl.NumberFormat 带千位分隔符；页脚文字只出现一次，不被布局嵌套重复。
30. 执行映射规则后产出映射日志：技能版本、DOMAIN.md 公司名、领域类型、垂直预设、段落数（含偏差）、布局、Tier 1 标准（全部满足或列出缺口）、构建的 Tier 2 能力（数量+理由）、完成总结中提及的 Tier 3 能力（数量）、映射项（数量+实体名→config 路径+子项/选项数）、映射规则（数量+BR 编号+来源关系→严重级别/动作）、配置的审批链、配置的折扣栈、使用的配置器模式（含基于属性数和级联的理由）、生命周期指示模式（Tabs 列表+状态流是否包含及理由）、跳过实体（数量+原因）、遗留开放问题（数量）。
31. 参考文件：references/config-schema.md（CPQ 配置形状的完整 TypeScript 接口）、references/vertical-presets.md（产品域和 calculator 域的详细预设）、references/example-config.json（完整填充的示例配置）。

适用边界 · 注意事项

• 领域主要是库存跟踪（用 ERP 技能）、带现场跟踪和付款的持续项目执行（用 trades-builder）、在线产品销售（用电商技能）或客户关系管理（用 CRM 技能）时不要用本技能。
• 四条 CPQ 判据不全部成立时不要硬套：缺结构化输入→是仪表盘；缺计算逻辑→是数据录入表单；缺评审关卡→按 CPQ 做但跳过 Approve；缺交接→是个人计算器。常见误判：股票报价查看器（缺判据 1）、无复核步骤的税务计算器（缺判据 3+4）、带价格的产品目录（缺判据 2+3）、反馈表单（缺判据 2）。
• 不要为填充 UI 而编造角色、空 Tab 或「coming soon」Tab；不要为凑段落数而增删段落；不要为填充布局而加 Tab 条（只有一个 Tab 就没有 Tab）；不要用垂直步骤条处理非向导式工作区流程。