AI 私厨管家
C 端组件规范

语义优先品牌强调、成功、警告、错误、信息分别使用独立 Token。状态同时用图标与文字表达，避免仅以红绿区分。

文字与边界正文 ≥ 4.5:1，大号文字 ≥ 3:1；关键控件边界用 #958477（白底 3.59:1）。弱分隔线用于非交互内容。

交互色阶主操作默认 #B94700 / 悬停 #A53D00 / 按下 #8F3500；焦点蓝 #3A7BFF，3 px 外环，外偏移 3 px。

可读性正文不小于 16 px；12 px 仅限辅助文案。正文行高 1.5–1.75，长文每行约 35–40 个汉字。

层级节制单屏控制在 3–5 个字体层级。标题 600、操作 500、正文 400；避免大面积 700 以上粗体。

溢出与缩放关键标签换行，摘要可省略并提供完整内容；支持系统字体放大。此规范封面 48 px 为文档展示特例。

组件内部图标与文字 8 px；标签与输入框 8 px；帮助文案 4–8 px；控件水平内边距 12–16 px。

内容组合表单项之间 24 px；卡片内边距 16–24 px；模块之间 32 px；文档章节间距 48–64 px。

C 端适配业务页面移动端横向边距 16 px、列间距 12 px；平板 24 px、桌面 32 px。1920 px 为规范展示宽度。

尺寸一致44 / 48 px 按钮和输入框统一 12 px；36 px 小号使用 8 px；圆头像保持正方形容器。

嵌套协调外容器 16 px，内部控件 8–12 px；避免相邻容器使用接近但不同的圆角值。

例外边界底部弹层仅顶部 16 px；全屏页面不加圆角；胶囊用于筛选和强动作，不扩展到所有卡片。

风格统一同一页面不混用线性与实心家族。选中态可用填充强调，但必须保持一致的语义与视觉中心。

无障碍命名纯图标按钮提供 aria-label；装饰图标设 aria-hidden。删除、收藏等操作给出文字或状态反馈。

光学对齐行内图标垂直居中；不同图形适当留白，不强行拉伸。SVG 继承 currentColor，缩放保持描边。

尺寸按钮最小宽 88 px，横向内边距 20 px；全宽主按钮左右各留 16 px。小按钮需扩展触控区至 44 px。

状态默认、悬停、按下、焦点、禁用、加载六态齐全；禁用用原生 disabled，加载用 aria-busy。

文案与反馈优先“保存计划”“加入清单”。异步结束后反馈结果；危险操作使用错误色，并提供确认或撤销。

选择类型Message / Toast：短结果；Alert：页面内持续说明；Notification：可稍后处理的跨任务通知。

位置与时间Message 顶部距安全区 24 px；Toast 可居中；普通提示 3 s 消失，同屏最多 3 条。错误提供持久文案。

无障碍普通消息 role=status，紧急失败 role=alert；不抢焦点。提示包含“发生了什么”与“如何继续”。

尺寸与图形评论 24–32 px，列表 40–48 px，个人资料 64–80 px；轮廓图标为容器约 56%，圆形裁切。

回退顺序有效用户照片 → 昵称首个字形 → 默认人物。图像 object-fit: cover；错误不显示破图标记。

身份与交互人物用圆形、助手可用圆角方形；不默认暗示性别。可点击头像需按钮语义与 44 px 触控区。

尺寸静态标签 26 px 高 / 12 px 字 / 8 px 圆角；交互 Chip 默认 36 px，移动端至少 44 px。

颜色标签采用低饱和浅底 + 深色文字；危险色仅用于失效、异常等语义，避免所有标签都强调。

交互筛选项用 aria-pressed；选中时加勾选标记。删除按钮独立命名，移除后焦点转到相邻项。

尺寸与布局线性轨道 6 / 8 px、圆角全圆；文本与轨道间隔 12 px；环形描边 6–8 px，避免内部文字拥挤。

状态进行中用主色、完成加勾选、失败显示原因与重试；超目标的业务值单独标注，不将进度画超 100%。

语义与更新使用 progressbar + aria-valuenow；不确定进度省略当前数值。屏幕阅读器仅播报关键阶段。

尺寸常规轨道 48 × 28 px、滑块 22 px；紧凑轨道 36 × 22 px、滑块 16 px；点击区不小于 44 px。

状态开 / 关、禁用开 / 禁用关、焦点与保存中。开启时滑块位于右侧，不只靠颜色区别状态。

交互点击与 Space 切换，焦点保持在开关；远端保存失败应回退并说明原因。本页设置仅在当前页生效。

尺寸轨道 6 px，滑块 24 px / 边框 2 px；整行至少 44 px 高。当前数值持续可见，刻度保持简洁。

数值约束明确 min / max / step 与单位；范围下限 ≤ 上限。高频拖动仅更新预览，结束后提交业务数据。

键盘与触控方向键按步长变化，Home / End 至边界；双滑块均可聚焦。标签及输出同时反映当前值。

尺寸默认 44 px；大号 48 px；紧凑 36 px 仅用于桌面；文字 16 / 24 px。

状态默认、悬停、聚焦、填写、错误、只读、禁用；错误同时提供文字说明。

交互输入后显示清空，桌面按钮 36 px、触屏 44 px；失焦或提交校验；标签距控件 8 px。

尺寸内边距 12 × 14 px；行高 24 px；默认 4 行；最大高度 240 px 后滚动。

状态默认、聚焦、错误、禁用；字数接近限制时提示剩余量。

交互Enter 换行；保留用户输入；到达 200 字上限后停止输入，并显示计数。

尺寸控件高 44 px；建议宽 160–240 px；数值使用等宽数字，单位距内容 8 px。

状态预算留空表示未设置，0 表示零预算；超出范围显示错误；禁用时禁止编辑和调整。

交互↑ ↓ 调整步长；失焦后格式化小数；越界保留输入并提示，不静默篡改。

尺寸加减触控区 44 × 44 px；中间数值宽至少 48 px；图标 20 px；圆角 12 px。

状态默认、按下、聚焦、边界禁用、整体禁用；边界按钮即时更新状态。

交互单击调整 1；键盘 Tab + Enter / Space；读屏实时播报数量。

尺寸高 48 px；图标 20 px；内边距 14 px；搜索按钮与输入框间隔 8 px；32 px 热词按钮为桌面紧凑样式，移动端扩展至 44 px。

状态空白、输入、聚焦、搜索中、结果、无结果、禁用；保留最近的有效内容。

交互Enter 提交；× 清空并回到输入框；本页搜索使用本地示例食谱。

尺寸默认高 44 px；菜单项高至少 44 px；菜单间距 4 px；最长 6 项后滚动。

状态占位、已选、展开、聚焦、错误、禁用；选中项同时使用图标与背景标识。

交互演示使用原生 select，支持键盘选择；Esc 关闭；确认后焦点返回触发控件。

尺寸桌面单列宽 280–360 px；列表项高 44 px；左右操作按钮 44 × 44 px。

状态未选、勾选、禁用、空列表、加载；空列表保留容器高度与说明。

交互勾选后批量移动；保留稳定排序；操作后焦点落回移入列表中的项目。

尺寸输入区高 44 px；列选项与原生时间输入均为 44 px；双列间距 8 px。

状态未选、已选、聚焦、超范围、禁用；不可预约的时段禁用并注明原因。

交互常用时间 36 px 按钮为桌面紧凑样式，移动端扩展至 44 px；本页列选即生效；弹层版本需提供明确确认操作。

尺寸弹层建议宽 360 px；日期点击区 44 px；7 列固定栅格；左右留白 12 px。

状态默认、今天、选中、悬停、聚焦、禁用；范围场景增加起点、终点、区间色。

交互切月保留已选值；单日选择即确认；使用明确年月标题，避免数字日期歧义。

尺寸居中弹窗宽 440–560 px，内边距 24 px，圆角 16 px；底部弹层仅顶部圆角 16 px，保留底部安全区。

状态默认 / 提交中 / 成功 / 失败；破坏性操作明确后果，使用危险色按钮；同屏仅一个主弹层。

交互打开后将焦点移入并约束 Tab；Esc 关闭并返回触发按钮。限制弹窗最大高度，超长内容在弹窗内滚动。

尺寸正文占位高 14 px、行距 12 px；头像 32–48 px；封面使用与内容一致的比例和圆角。

状态首次加载显示骨架；后台刷新保留已有内容；加载失败替换为错误说明与重试操作。

交互占位元素不进入 Tab 顺序，容器标记 aria-busy。动效 1.6 s，尊重减少动态效果设置。

尺寸拖拽区高度至少 160 px，缩略图 64 × 64 px，点击上传按钮与操作触点至少 44 px。

状态空闲 / 拖入 / 校验失败 / 上传中 / 成功 / 失败；错误原因就近展示，不只使用红色表达。

交互点击与拖拽同等可用，Tab 可聚焦原生文件选择器。更换或删除释放预览资源，状态以 live region 播报。

尺寸空状态图标 48 px，图形容器 88 px；标题 18 / 26 px，正文 14 / 22 px，主操作距正文 20 px。

状态区分首次无内容、筛选无结果和异常失败；提供上下文信息，避免统一显示「暂无数据」。

交互每个状态提供明确下一步；重试中反馈进度并防止重复操作。图形为装饰，信息完整保留在文字中。

尺寸绘图区高度至少 200 px；折线 2–3 px，数据点 6 px；轴标签至少 12 px，坐标与单位完整。

状态加载 / 有数据 / 无数据 / 错误；柱图从零起，环图总和为 100%。演示值不构成个体饮食建议。

交互周期按钮可键盘切换；形状、线型和文字共同编码，数据表提供完整等价信息，避免仅靠悬停获取数值。