hy-screen-2.0/screen2-ui-standard.md

Screen2.0 大屏界面统一标准

适用范围：红原县数字畜牧业监管平台 Screen2.0 的首页、林草湿一张图、生态保护、牦牛管理、牦牛全产业链、牧场管理、草畜平衡、智慧管理等 1920x1080 大屏界面。

代码落点：

• CSS token：src/assets/style/screen2-tokens.css
• JS 标准配置：src/utils/screen2Standard.js
• ECharts 公共主题与标准图表构造：src/utils/chartTheme.js
• 业务卡片通用渲染器：src/views/forestGrassWet/components/BusinessPanelRenderer.vue
• 后续界面如果需要计算卡片高度、跨卡片高度、图表字号和配色，优先引用上述标准，不再各页面手写一套。

1. 基础画布

• 设计分辨率固定按 1920 x 1080。
• 页面必须保持一屏完整呈现，不允许出现浏览器滚动条。
• 中央区域优先承载地图、三维地图或核心业务空间信息。
• 左右两侧为信息卡片区，不抢占中央地图主体。

2. 页面布局

• 首页和各业务主界面统一采用：左侧 4 个卡片，右侧 4 个卡片。
• 左右卡片宽度统一为 398px。
• 左右卡片间距统一为 12px。
• 侧边卡片区域上边距固定 128px，底部保留固定 8px。
• 卡片标题区高度为 36px，内容必须从标题下方开始。
• 不允许出现 3 个卡片强行占满一侧的情况，除非是独立专题页并经过确认。
• 允许业务列表占据两个卡片高度，但该侧仍按 4 格高度计算：例如“列表 2 格 + 图表 1 格 + 图表 1 格”，不能因为有一个双高列表就让下半区留空。
• 不允许卡片里再套一层大卡片；列表、图表、指标块可以作为内容组件存在。
• 卡片内容必须填满有效区域，避免右侧或底部大面积空白。

3. 字体规范

代码变量见 src/assets/style/screen2-tokens.css。

• UI 正文字体："Alibaba PuHuiTi", "PingFang SC", "Microsoft YaHei", Arial, sans-serif
• 大标题字体："Alimama ShuHeiTi", "阿里妈妈数黑体 Bold", "Alibaba PuHuiTi", sans-serif
• 数字字体："D-DIN", "D-DIN-Bold", Arial, sans-serif
• 禁止单独使用不稳定字体名：PingFangSc、AlibabaPuHuiTi。
• 图表、表格、卡片、菜单不得使用浏览器默认字体。

4. 字号规范

场景	固定字号	字重	说明
顶部大标题	48px	900	只用于平台主标题
顶部菜单	14px	600	文字必须清晰可读
卡片标题	16px	600	统一渐变白青色
顶部指标名称	14px	600	不要弱化到发灰
顶部指标数值	31px	700	使用 D-DIN
顶部指标单位	11px	600	跟随数值右侧
图表单位	10px	500	不低于 10px
图表坐标轴	10px	500	不低于 10px
图表数值标签	11px	700	必须可读，不遮挡
图表 tooltip	12px	600	背景深色、边框清晰
表格正文	11px	500	行距要稳定，报表类不宜过大
表格重点数值	12px	700	使用 D-DIN，避免挤占列宽
弹窗标题	20px	700	只用于地图详情、业务详情
弹窗正文	14px	500	行距稳定，不能发灰

5. 颜色规范

代码变量见 src/assets/style/screen2-tokens.css。

• 主文字：#ffffff
• 强文字：#ffffff
• 次级文字：rgba(246, 253, 255, 0.92)
• 弱提示文字：rgba(242, 253, 255, 0.9)
• 辅助弱文字：rgba(229, 248, 255, 0.74)，只用于空状态、禁用态等弱提示，不用于图表轴、单位、数值标签
• 主强调青：#30dcff
• 青绿强调：#19ffc6
• 水域强调：#31dcff
• 草地/生态图表默认折算到青绿：#24f6c4
• 不把黄色、橙色、紫色、强绿色作为默认图表色；只有明确告警且经过确认时才能局部使用
• 卡片边框：rgba(62, 226, 255, 0.5)
• 卡片背景：rgba(10, 52, 72, 0.7)
• 卡片标题背景：rgba(40, 124, 158, 0.62)
• 图表网格线：rgba(218, 250, 255, 0.28)
• Tooltip 背景：rgba(3, 13, 18, 0.92)

使用要求：

• 重要标题和数值不能使用低对比灰色。
• 坐标轴文字可以弱化，但不得低于 rgba(242,253,255,0.9) 的可读性；首页、林草湿、牧场、牦牛等主界面图表轴和单位不使用 0.48/0.58 透明度。
• 单位文字放在图表左上或右上，不要重复贴在每个柱子上。
• 林草湿、生态、牦牛、产业链、牧场等页面的图表默认参照首页：青蓝、青绿、浅青、深蓝青同色系变化，不允许一张图里黄、绿、橙、紫混排；图表文字要像首页/林草湿一样清晰，不能整体发灰。
• 卡片背景保持透明科技蓝，不再额外叠加大面积黑色遮罩。
• 例外：地图上的“牦牛识别/牦牛分布”框线按业务识别习惯保留黄色体系，推荐 #FFCB45 / #FFF4B8，但只用于识别框、选中框或少量点位，不扩散到常规图表和顶部指标。

6. 卡片规范

• 统一使用 mCard 作为基础容器。
• 页面固定按 1920x1080 设计。
• 左右侧卡片宽度固定 398px。
• 左右侧卡片间距固定 12px。
• 侧边卡片顶部固定 128px，底部预留 8px。
• 常规一侧 4 卡时，单卡高度按公式计算：(视口高度 - 128 - 8 - 12 * 3) / 4，1920x1080 下为 227px。
• 一侧只有 3 张卡片但仍要遵循四格节奏时，必须使用 1 + 1 + 2 的高度组合；最后一张双格卡使用公共公式 getScreen2SpanHeight(sideCardHeight, 2)，1920x1080 下为 466px。不要手写 +24px、*2-gap 等临时高度。
• 标题左边距 22px，标题高度 36px。
• 左侧卡片透视统一为 500px，右侧卡片透视统一为 800px，左右倾斜角度分别为 rotateY(6deg) / rotateY(-6deg)。
• 卡片内容区从标题下方 36px 开始，底部到卡片底边 0，不再使用额外 40px/10px 偏移造成标题和图表位置不一致。
• 标题颜色使用白青渐变：#dbf9ff -> #a9f0ff。
• 卡片内边距要根据图表类型单独设置，但不得压住标题。
• 卡片内图表建议高度占内容区 72% 以上，避免视觉发空。
• 有单位时只显示一次，默认放图表区域左上或右上。

7. 图标规范

所有界面的图标参照首页顶部指标图标风格处理。

• 所有顶部 KPI 指标参照首页显示：青蓝图标底座、白色标题、D-DIN 数字、右侧单位；多指标场景也不得退化成纯文字列表。
• 当前阶段顶部 KPI 图标先保留；除非后续单独确认，不做“去图标化”处理。
• 主色固定使用青蓝：#30dcff，辅助色只允许少量青绿：#19ffc6。
• 不允许同一组图标混用高饱和黄、橙、红、紫、绿，避免看起来花。
• 图标线条以细线和面形结合为主，默认描边约 1.5px，不要做粗描边。
• 图标外发光必须克制，透明度不超过 0.28，不允许多层强 drop-shadow。
• 顶部指标优先使用 src/assets/images/top-stat-icons/ 下的统一图标资产。
• 业务卡片里的自绘小图标也要统一为青蓝体系，不按不同业务随意变色。
• 定位、告警、选中态可以提高亮度或加白色点，但不改成大面积红色、橙色。
• 图标大小默认 42px，顶部指标图标可按首页布局放大，但颜色和发光保持同一体系。

8. 图表规范

同一个界面不能出现两个完全一样的图表样式。至少在以下一个维度上拉开差异：图形类型、柱体宽度、柱帽样式、是否叠加折线、方向、布局结构。同一页不要靠黄、橙、紫、强绿等多色混排来制造差异，差异必须保持在首页青蓝/青绿/浅青同色系内。

推荐组合：

• 面积分布：竖向柱状。
• 水域/湿地分布：水柱、圆帽柱状或横向满宽排名。
• 林地/森林乡镇分布：参照首页牦牛存栏分布，使用精细竖柱 + 浅青细折线；林地质量、类型、权属再使用热力、结构条、环图等，不与面积分布重复。
• 牲畜分布、存栏分布、趋势性排序：柱状 + 细折线。
• 趋势变化：面积折线。
• 结构占比：环图、3D 环图、环图 + 明细列表。
• 排名明细：横向条形或排行列表，但不能右侧留空。
• 状态类指标：仪表盘、环形进度、状态列表。

林草湿资源概览固定示例：

• 草地分布：普通竖向柱状，强调草地面积基础口径。
• 湿地分布：水柱/圆帽柱状，强调湿地资源属性。
• 林地分布：精细竖柱 + 浅青细折线，参考首页牦牛存栏分布；柱顶显示数值，单位右上角统一显示。
• 林地质量：保留业务含义，可用热力/等级结构，不改成普通柱状。
• 林草湿面积构成：保留结构/占比型图表，不与面积分布图重复。

图表参数底线：

• 图表文字不低于 10px。
• 图表文字层级固定：单位 rgba(246,253,255,0.9)，轴文字 rgba(240,252,255,0.86)，柱顶/关键数值 #ffffff，不得用低透明灰白冒充弱化。
• 新增或重构 ECharts 图表优先使用 src/utils/chartTheme.js 里的 withChartDefaults、chartTooltip、categoryAxis、valueAxis、createSystemBarOption 等公共能力；不得在页面内重新定义低透明轴色、强发光 tooltip 或花色 palette。
• BusinessPanelRenderer.vue 是林草湿、生态保护、牧场管理、牦牛全产业链等业务卡片的默认渲染入口；新增业务卡片优先通过它的 bar、column、donut、structure、projectTable 等类型扩展，不要在页面里复制一套相似 DOM 图表样式。
• BusinessPanelRenderer.vue 默认不尊重业务行里的自定义花色；只有地图图例、风险告警或明确需要保留原始分类色时，才允许设置 preserveColors。
• 图表 tooltip 字号 12px，背景深色，边框青色或白色细线。
• 柱状图参照首页精细柱体：10 个乡镇场景常规竖柱优先 6px，水柱可 10px，横向排行条优先 8px，顶部白青高光，底部青蓝弱透明渐隐，不能做粗块状或多色强发光。
• 竖向柱状图必须在柱顶显示数值标签，样式参照首页：白色、D-DIN 或统一数字字体、11px 左右；单位只在图表角落显示一次，不在每个柱顶重复。
• 同页如有多个柱状图，基础面积类使用纯细柱；趋势/存栏/数量变化类可叠加 1.3-1.6px 浅青细折线，不能两张图都套同一种折线。
• 除首页外，业务页图表不做强外发光；柱体、点位、折线只保留低强度高光，避免模糊和花。
• 非乡镇类柱图，例如年龄段、年份、类型分组，优先横排完整显示名称；乡镇类可按首页竖排，但不得截断到无法识别。
• 环图中心只显示关键百分比或数值，名称放到右侧/下方列表，避免文字挤在圆心里。
• 热力格、结构条、进度条不得使用大面积发光背景；只保留 1px 细边框和低透明度高光。
• 横向条形图必须在卡片内完整显示名称、数值和单位；行数较多时自动压缩行高或改分页，不允许底部裁切。
• 字体、轴线、网格、数值标签必须走首页同一套样式；不得出现同页面字体粗细、颜色深浅不一致。
• 10 个乡镇必须全部显示，名称不能被遮挡。
• 数据标签不能互相重叠；显示不下时优先减少装饰，不压缩文字。
• 无正值业务数据的图表不得保留空坐标轴、空网格或空图例；统一显示克制的空状态文案，例如“暂无业务统计数据”。

9. 数据呈现规范

• 首页和业务页展示的是“最终展示口径”，不要把数据库原始口径直接暴露到界面。
• 指标卡、图表、智慧管理提示词里的同一指标必须保持一致。
• 有合计关系的数据必须做合计校验，例如草地退化分类合计必须等于草地面积口径。
• 不允许出现无业务意义的图斑数量堆叠，必须转成业务维度：面积、乡镇、状态、类型、年份、项目、户数、头数等。

10. 地图与图层规范

• 地图是主视觉，不允许被两侧卡片过度遮挡。
• 默认视角要稳定，进入页面后能直接看到主体区域。
• 图层控制样式统一，采用树形层级，不同界面只换业务名称和图层项。
• 图层弹窗必须出现在点击位置上方或附近，不能偏离选中位置。
• 图标不能漂浮在空中，必须贴合地图点位或三维地表。
• 识别框、选中框、项目图斑优先以前端矢量或 WFS 透明填充叠加；常规项目描边使用青白细线。“牦牛识别/牦牛分布”作为业务例外使用黄色细线，不使用大面积黄色/橙色 WMS 样式覆盖地图。

11. 验收清单

每个界面调整完成后必须检查：

• 1920x1080 截图无滚动条。
• 左右是否各 4 个卡片。
• 卡片宽度、标题位置、倾斜方向是否一致。
• 字体是否使用统一字体栈。
• 图表单位、坐标轴、标签是否不低于 10px。
• 同一页是否存在完全重复图表样式。
• 图标是否统一为首页青蓝风格，是否存在高饱和花色或过强发光。
• 是否存在大面积空白、文字遮挡、tooltip 无意义。
• 控制台无报错。
• 页面截图保存到 tmp/ 或 /tmp/ 作为验收依据。