概览 / 报表 / 原型设计

基于可复用的视觉和交互规则，设计新的统计概览、分析看板、数据报表和高保真原型。

工作流程

阅读需求，明确用户需要从页面中识别什么、比较什么、判断什么以及执行什么操作。
编写 HTML 前先确定信息层级：上下文或筛选条件、概览指标、分析证据、明细数据和次级操作。
只选择任务实际需要的组件类型，避免为了填充页面堆叠无关模块。
完整阅读匹配的规范文件：
- 所有任务都必须阅读 references/foundations.md。
- 包含卡片、筛选器、按钮、KPI 或状态反馈时，阅读 references/cards-controls.md。
- 包含图表、图例、坐标轴、计划、预测、目标或排行时，阅读 references/charts.md。
- 包含表格、热力图、层级结构、展开收起、固定区域或全屏展示时，阅读 references/tables-interactions.md。
- 最终检查前阅读 references/quality-checklist.md。
创建独立 HTML 原型时，从 assets/analytics-prototype-starter.html 和 assets/ui-tokens.css 开始；简单示意图表使用内联 SVG，需要交互提示、动态数据或多系列图表时引入 ECharts 并复用 assets/echarts-options.js。
使用用户的业务内容替换中性示例内容，保留组件类名约定和语义颜色映射。
实现原型需要的真实交互，包括筛选反馈、分段切换、展开收起、提示信息、横向滚动和全屏进入退出。
在接近 1440×900 的桌面视口中渲染并检查完整滚动范围、密集数据、初始/加载/空/异常状态，同时至少验证一种较窄布局。

设计原则

使用中性的统计分析画布：白色卡片、克制边框、弱阴影和紧凑间距。
只在指标、流程、分类或告警卡片左侧使用语义色竖线；筛选、图表和表格卡片保持中性。
根据数据含义分配图表颜色，不得按照系列顺序或个人偏好随机配色。
页面内"实际、计划、预测、目标、历史均值、风险"的视觉编码必须稳定。
使用图表表达趋势和比较，使用表格支持精确查找；没有明确理由时不要重复表达同一份信息。
严格控制主按钮数量；展开、全屏、导出和视图切换使用次级按钮。
展开收起和全屏切换时保留数据状态与滚动位置。
缺失数据使用 —，真实零值使用 0。
界面文字、标题、图例、字段名、提示和空状态必须使用中文；用户未明确要求时，不提供英文切换或多语言文案。

输出要求

除非用户只要求单个组件，否则输出完整、可运行的原型，而不是互不关联的代码片段。
使用语义化 HTML，并为按钮、表头、aria-expanded、aria-pressed 等交互状态提供可访问性信息。
集中管理 CSS 变量，不得在页面各处散落随机颜色、间距、圆角或字号。
不得使用空白矩形代替图表；必须渲染具有代表性密度的 SVG、Canvas 或 ECharts 内容。
不得引入渐变玻璃、霓虹发光、重阴影、超大营销标题或纯装饰图表。
只生成中文产品界面；代码关键字、类名、API 名称和库名称可保留其标准技术写法。

资产使用说明

| 文件 | 用途 | |---|---| | assets/analytics-prototype-starter.html | 独立 HTML 原型的起始模板，包含筛选区、KPI 卡片、图表占位、分组表格和全屏交互的完整骨架 | | assets/ui-tokens.css | 统一的 CSS 变量和组件样式，涵盖颜色、间距、字体层级、卡片、表格、筛选器和响应式断点 | | assets/echarts-options.js | ECharts 图表配置工厂函数，包含组合趋势图和风险排行图的预置选项。使用前需在页面中引入 ECharts：<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script> |