# 马上住移动端设计系统 > Web 最新更新：2026-10-27。目录收录 50 个公共代码组件、14 个原生/模板/装饰条目（共 64 个已实现标签），以及 38 个按钮规格和 31 个页面（30 个当前页面 + P01 历史页）。本次变更见 [审查与更新记录](audit-20261022.md)，上一轮验证见 [修复验收记录](fix-20261021.md)；Figma 原稿整体迁移仍保留既有 partial 边界。 本库从已完成的移动端原型提炼，使用原生 Web Components、DTCG JSON 和 CSS 自定义属性。设计与视觉依据仍是一期 Figma 文件及已记录的用户修订，页面代码用于核对实际落地情况。 - [本地可视目录](../../design-system/index.html)：Foundations、Token 浏览器、组件与模板。 - [Foundations](foundations.md)：颜色、字体、圆角、间距、阴影及交互规则。 - [组件目录](component-catalog.md)：原子、分子、复合组件、模板及预览环境的分层。 - [决策与待确认项](decisions.md)：明确依据、推定与差异的边界。 - [执行记录](execution-record.md)：本轮交付范围和可重复验证方式。 - [组件 API 数据](component-api.json)：本轮基础组件的真实属性、事件、插槽和示例。 - [全量组件注册表](../../design-system/components.json)：所有已实现自定义元素及未实现候选项。 最新底部 TabBar 已同步指定 Figma 图标家族的五组未选中/选中状态，组件详情提供五种页面状态示例；来源与验证见 [TabBar Web 同步记录](tabbar-web-sync-20261027.json)。 ## 使用顺序 后续六项问题（旧同步回退、全量 API 入口、方法与数据结构展示、键盘焦点、弹窗焦点及分类说明）已完成修复，见 [六项修复与验收](fix-20261022-six-issues.md)。 先按用途查 Semantic token，再选组件。只有组件有独立视觉规格时使用 Component token；新增原始值先登记 Primitive，并记录依据和状态。纯页面坐标、图片裁切偏移、长页画布高度保留在页面配置或还原规格中，不作为公共基础规则推广。 ```text Primitive 原始值 → Semantic 使用角色 → Component 独立规格 → 组件 → 模板 → 页面数据 ``` Token 的 Primitive 层与原子组件是两种概念：前者存设计值，后者封装可使用的界面元素。 ## 本地构建与复用 ```bash python3 tools/build_design_system.py ``` 该命令统一编译token、校验API与注册表、生成目录数据及页面/单文件预览。目录CSS和JS引用带内容版本号，避免浏览器沿用过期文件。 新修改先按实时 Figma 与当前实现的审查结果更新已确认真源，再执行上述构建；构建本身不执行 Figma 实时同步。固定读取旧快照的 `tools/sync_web_design_system.py` 已停用，在写入前退出，避免覆盖新增按钮、artwork 和灰色禁用态。详见 [同步维护流程](sync-maintenance.md)。 入口为 `http://127.0.0.1:8899/design-system/index.html`（现有本地服务）；也可以从项目根目录用静态服务打开。产品页面继续使用原来的URL。 [全部公共组件 API](../../design-system/index.html#components/all) 可搜索全部 50 个公共组件，包含仅在单个页面使用的 BookingForm、MemberCard 等组件。详情提供属性、事件、插槽，以及已登记的方法参数/返回值和数据结构；复合组件分区继续精选跨页面复用的预览。 原子与分子可分别引入，无需引入整个页面： ```html 门店信息 整家焕新 ``` 宿主监听 `mzh-contact` 并根据 `event.detail.action` 实现实际服务。新组件只提供事件，地图、电话和业务跳转由页面处理；组件属性、事件详情与示例以可视目录API面板为准。 Button使用新属性 `variant="primary|secondary|ghost|elevated"`；旧页面的 `style="primary"` 写法保留兼容，不作为新用法推荐。 ## 当前页面基线 | 页面 | 用途 | 在本库中的角色 | |---|---|---| | P01B | 首页 1.3 | 当前首页基线 | | P02 | 产品教程 | 教程与产品组合示例 | | P03 | 免费预约 | 表单与成功反馈示例 | | P04 | 我的 | 会员权益与功能入口示例 | | P05 | 服务案例 | 分类、筛选和双列卡片示例 | | P06 | 案例详情 | 内容详情模板示例 | | P07 | 附近门店 | 门店列表与筛选示例 | | P08 | 门店详情 | 门店详情与评价模板示例 | | P09 | 用户评价 | 共享评价卡、筛选与排序模板示例 | | P10 | 消息中心 | 通知分类、已读与详情入口 | | P11 | 我的积分 | 积分余额与收支明细 | | P12 | 编辑个人信息 | 头像、资料输入与选择 | | P13 | 质保卡 | 有效与过期质保信息 | | P14 | 我的订单 | 待支付、待评价、进行中和已完成四态 | | P15 / P16 | 订单详情 · 未完成 / 已完成 | 进度、人员与合同报价信息 | | P17 | 人员查询 | 订单服务人员信息 | | P18 | 订单评价 | 评价输入、星级与图片上传/删除 | | P19 | 我的合同 | 合同状态与信息卡片 | | P20 | 我的收藏 | 收藏内容与详情入口 | | P21 / P22 / P23 | 报价测算 · 三个步骤 | 选择产品、输入测算信息与查看结果 | | P24 | 工艺手册 | 工艺分类与内容列表 | | P25 / P26 | 转介绍 / 转介绍分享 | 推广数据与分享海报 | | P27 / P28 | 物业专享 / 物业专享海报 | 物业推广内容与海报 | | P29 / P30 | 浏览记录 · 产品教程 / 案例 | 两个平级 Tab 与内容详情入口 | | P01 | 早期首页 | Legacy，保留回归兼容；不作为新设计的首选依据 | Web 的组件使用页统计同时读取页面 sections 和页面脚本；评价图片上传后动态创建的图标按钮也计入 P18。页面层级与名称以 `pages.json`、`catalog-hierarchy.json` 生成的数据为准。 ## 交付边界 本轮建立本地规范、Token 分层、基础组件及可视目录，保留既有页面。此处的 `built` 只表示本地代码实现存在；不代表 Figma 已创建主组件、Code Connect 已发布或跨框架适配完成。 现有实现是 Web Components。本项目不属于 `@3trees` 组件消费者；`agent-system` 技能仅借用分层和审计方法，不引入 React/Vue 框架，不宣称跨框架 parity。Figma 命名字段用于设计与代码身份对照，`codeConnect: null` 表示尚未连接。 历史规范和编写约束仍可参阅 [一期规范归纳](../1期设计规范归纳.md)、[规范编写规约](../设计规范编写规约.md)、[命名契约](../NAMING-CONTRACT.md)。历史文件中的 Figma 写入统计是当时记录；后续新设计系统页的真实同步和独立读回见 [执行记录](execution-record.md)，以实际 JSON 证据为准。 历史执行记录曾按原子、分子、复合、页面模板、辅助组件五类建立 51 个独立家族画板，并验收当时的 246 个实际变体无重叠、无越界；该数量不代表当前 Web 组件数量或本次 Figma 实时库存。整体原稿迁移仍为 partial，真实节点、后续整改与限制以各次独立读回记录为准，参见 [figma-sync-state.json](figma-sync-state.json) 和 [本次审查](audit-20261022.md)。