yafa-ui-dashboard

Yafa-UI：仪表盘

创建如精准分析仪器般的仪表盘：平静、明亮、信息密集、易于使用且便于快速浏览。保留宿主产品的品牌和框架，同时应用本系统的层级、几何形态、色彩分配和响应式行为。

阅读相关参考资料

• 阅读 references/dashboard-visual-system.md，了解外壳、字体排印、几何形态、卡片、表格和交互设计。
• 每当选择或审查路由强调色、KPI 颜色、图表系列、状态颜色或侧边栏图标颜色时，请阅读 references/color-system.md。
• 每当添加、替换、调整图标或技能标记的尺寸，或为其着色时，请阅读 references/icon-system.md。
• 每当更改布局、导航、筛选器、图表、表格、覆盖层或屏幕尺寸行为时，请阅读 references/responsive-adaptation.md。
• 进行设计或实现审查时，也请阅读 references/review-checklist.md。

保留以下不变量

• 对于全新的完整仪表盘，或与此模式兼容的宿主框架，构建四层结构：白色侧边栏、紧凑的白色顶栏、紧凑的页面标识／筛选栏，以及浅色 #f8fafd 分析画布。在已有宿主框架中，保留其界面框架，并将 Yafa-UI 应用于页面标识、分析层级、表面样式和响应式行为；未经授权，不要替换导航。
• 对于完整的 Yafa-UI 框架，导航应语义清晰、便于扫读。使用稳定的分组强调色、集中注册且按路由着色的目标图标、中性的非活动标签，以及活动路由色调和 3px 左侧指示条。在仅显示图标的导航栏中，图标和活动指示条都使用与对比度安全相符的 uiStrong 变体。将 300px 可调整大小的导航栏、64px 折叠导航栏和易访问的移动端抽屉视为全新默认值；如果已有宿主导航约定，则应遵循该约定进行调整。
• 侧边栏标题区域应简洁：一个简短的产品名称；只有当产品确实具有团队、项目或工作区范围时，才添加紧凑、仅显示值的上下文选择器。不要臆造选择器；如果位置和图标已能说明其含义，就不要重复添加标语或可见的上下文眉题。
• 对于全新或无品牌的仪表盘，使用自托管的 Inter，正文采用紧凑的 13–14px，页面标题采用 15–16px/800，卡片标题采用 14–15px/600，主要指标采用 26–32px/700。如果宿主已有既定的产品字体，应予以保留，并通过字号和字重呈现此层级。未加载 Inter 时，绝不要指定 Inter。
• 普通分析面板使用白色背景、1px 中性色边框、8px 圆角、极少或不加阴影、可选的 3–4px 强调线，以及 16–20px 内边距。
• 将标准 KPI 卡片放在页面标题之后。不要添加装饰性的右上角 KPI 图标。使用简短且带点状下划线的标题作为悬停／聚焦／点击时的说明入口，并配以低调的分隔线、主要数值和对比数据。
• 指标说明工具提示应紧邻标题，并能根据视口空间向左或向右翻转。窄屏时优先显示在上方；不要默认显示在下方，以免遮挡卡片数值。
• 当标题内容区宽度至少约为 720px，且本地化标签可以容纳时，页面标识应靠左，实际存在的完整全局视图／时间／周期维度组应靠右，并在同一紧凑行内显示。这是标准的桌面布局。不要臆造平台维度。应先折叠导航栏、截短非必要文案、收起次要维度，并将路由专属筛选项移入内容区；只有内容区确实更窄时，才可将完整的全局维度组移至标识下方，而不是让其溢出或缩小触控目标。
• 在中性基底上使用一组稳定的路由标识搭配、有规划的多色分析调色板，以及语义化的状态颜色。不要让每张图表、每个 KPI 或每个侧边栏图标都呈蓝色。
• 普通界面操作和路由标识使用具名的 Lucide 图标。不要混用图标包、使用表情符号替代图标、手绘仿制控件，或生成栅格界面图标。
• 普通操作控件使用矩形样式。Query、Generate、Search、Reset、Clear、Edit、Add 和筛选控件应采用 0–8px 圆角，并统一使用 32/36/40px 高度；不要做成胶囊形。
• 状态应显示为 6px 语义色圆点或紧凑图标，并配以普通中性文字。绝不要将圆点和标签包裹在带边框或着色的胶囊中。
• 数值变化量可以使用紧凑胶囊，但其表面应保持白色或透明，并带中性色边框。仅箭头、正负号、数值和百分比文字使用语义色。
• 内容顺序应从概览到证据：标识和维度、KPI 摘要、主要分析、辅助图表或排名，然后是密集表格或证据。
• 不同宽度下都要保留关键信息。布局应根据扣除界面框架后的内容区选择，而不能只看视口宽度；绝不要造成页面级横向溢出。
• 覆盖默认、悬停、聚焦、活动、禁用、加载、空数据、部分错误和完全错误状态。后台刷新时应保留已渲染的数据；仅在尚无可用数据时才使用完整骨架屏。

构建或修改仪表盘

1. 检查宿主产品现有的设计令牌、组件、导航模型、数据层级和无障碍规范。优先遵循既定的品牌形象、术语和必需工作流；除非任务明确要求进行更大范围的重新设计，否则将 Yafa-UI 应用于层级结构、分析界面、几何样式和响应式行为。
2. 将页面归类为标准概览、密集列表／数据库或画布优先型工作台。
3. 在设计控件样式前先梳理分析顺序。每个面板都应清晰回答一个问题。
4. 为路由标识、侧边栏分组标识、图标和图表类别颜色创建集中式注册表。不要根据渲染顺序分配颜色。
5. 如果现有基础组件能达到预期效果，就使用它们；否则创建小型语义化组件，而非覆盖整页元素的样式。
6. 应用响应式矩阵，并在 320px、375–390px、768px、1024px 和 1440px 下进行验证。测试变更断点的两侧。
7. 检查键盘焦点、抽屉／覆盖层的 Escape 键行为和焦点恢复、触控目标、200% 缩放、减少动态效果设置、长标签、溢出情况以及所有数据状态。
8. 运行宿主代码库中针对性的类型检查、测试和视觉验证。说明任何有意偏离本系统的情况。

应用此技能时，不要悄悄重新设计产品中无关的区域。共享外壳的变更可能影响这些区域；请验证其影响，但不要将那些页面视为视觉参考。