/** * 驾驶舱视觉 token —— 唯一来源。 * * 主色、语义色、文字色、字体、字号、间距、层级都只在这里声明一份:设计公司交付正式视觉资源后 * 改本文件即可全驾驶舱生效(票 06 的「视觉资源可替换」就落在这里)。 * 例外:组件里各自的装饰性渐变/辉光(散落的 rgba,如面板切角高光、扫描线)不属主题色, * 换肤时需个别替换——它们不影响信息架构,也不构成第二份主题定义。 * * 为什么挂 `.cockpit-shell` 而不是 `:root`: * 下面这些名字(--cyan / --text / --font / --muted 等)都很通用,挂到 :root 会顺着 * 全局样式漏进宿主应用与 src/plugins 里的插件样式;挂在外壳根元素上,靠 CSS 自定义 * 属性的继承只作用于驾驶舱子树,既集中又好收敛。 * * 批次 2(票 15,2026-10-12):色值与设计基准按蓝湖 2026-10-12 版(v3/v4)主画板 * Desktop-6「总体概览」与全稿色板替换;事实基线见 * .scratch/lanhu-cockpit-asset-replacement/research/15-batch2-token-baseline.md。 */ .cockpit-shell { /* 设计像素 --u:**按视口高度**缩放,不按宽度(维护者 2026-10-23)。 原先写 `0.0694vw`(1440 宽基准):屏幕一拉宽,字号、顶栏、间距全部同比放大 —— 超宽屏上"文字和顶部菜单缩放太多",而驾驶舱的**信息密度是由高度承载的**, 多出来的宽度应该用来**多放内容/留白**,不该把同一屏内容整体吹大。 改为 0.1235vh:1080 高时 1.333(与改动前 1920×1080 完全一致,16:9 屏观感不变), 1440 高时 1.778,封顶 2px(2160 高即 4K),下限 1px 保住 1280×720 的可读性承诺。 效果:3840×1080 / 3440×1440 这类"只加宽不加高"的屏上,元素**不再放大**; 元素大小由占比(高度份额)决定,而不是被宽度推着长。 */ --u: clamp(1px, 0.1235vh, 2px); /* ---- 底色与面板 ---- 设计稿(9/9 画板一致):页面底 #010514;面板 = #02091b@0.28 底 + 蓝色九停渐变 (取首停 #00359c@0.34 为 mid、末停 #000f34@0.38 为 bot);内嵌容器 #001f5c@0.50; 面板边框 #01abea@0.35(唯一一套,45 个 Panel 节点无一例外)。 维护者反馈地图透底影响读数:运行时不透明度改为 .88/.82/.90,中段加深至 #001c46; CockpitPanel 叠加 12px 磨砂模糊,属于已确认可读性偏差。 2026-10-22 维护者要求稍微调透(有磨砂兜底):三档各降 0.08 → .80/.74/.82; 同日再调:--panel-mid → 0.6、再 → 0.5(渐变中段对透出地图的观感影响最明显); 磨砂模糊同步增强 12px → 16px(CockpitPanel)。 2026-10-23 维护者要求**颜色渐变**(色相可感知,不只是透明度): 先是「亮蓝(顶)→ 中蓝 → 深邃近黑蓝(底)」,同日反转并调透: **深邃近黑蓝(顶)→ 半透中蓝 → 亮科技蓝(底)**,亮蓝沉底收边; --panel-mid 继续调低 0.5 → 0.4。 同日再收:**取消面板背景的颜色渐变**(三停色相归一 #001c46,只保留透明度节奏 .82/.4/.8);颜色渐变转移到**数据统计指标卡片**(--stat-card-bg,KPI 卡消费)。 */ --bg-0: #010514; /* 票 18(批次 5):第二底色(设计稿面板顶 #02091b 的基色)——页面氛围底的中停与 地图画布占位底共用一份;此前 CockpitShell 氛围底渐变与 MapCanvas 底各写一份裸值。 */ --bg-1: #02091b; --panel-top: rgba(0, 28, 70, 0.82); --panel-mid: rgba(0, 28, 70, 0.4); --panel-bot: rgba(0, 28, 70, 0.8); /* 数据统计指标卡片(.panel-kpi 等)的颜色渐变:深蓝(顶)→ 亮科技蓝(底), 与面板底色同族但色相可感知;卡片更小,alpha 比面板淡(不喧宾夺主)。 2026-10-23 维护者:反向试一试(原为亮蓝→深蓝)。 */ --stat-card-bg: linear-gradient(180deg, rgba(0, 28, 70, 0.6) 0%, rgba(0, 82, 155, 0.45) 100%); --panel-line: rgba(1, 171, 234, 0.35); --panel-line-hi: #01abea; --inset: rgba(0, 31, 92, 0.5); /* ---- 主色 ---- 设计稿强调主色 #01abea(281 处:面板表头/边框/交互强调); #00b8ff(59 处)语义不同——一级模式/行业 chip 的选中与部分标题,单列 --cyan-hi。 深档 --cyan-d 取全稿 #009de9。 */ --cyan: #01abea; --cyan-hi: #00b8ff; --cyan-d: #009de9; /* ---- 语义色:事件四级与点位状态共用一套调色板(ADR 0006 / 0008)---- 色键只说优先级与深浅,不说业务:同一个 --lv1 在事件里是「1 级」、在点位状态里是「报警」。 两套标签词与形状见 domain/statusTones.js(事件)与 domain/pointStatus.js(点位状态)。 色值取设计稿状态词实测:报警 #ff3b52 / 预警·处置中 #ffb020 / 进行中·待接单 #01abea / 正常·在线 #27d17a / 离线·无数据 #5680b0。 */ --lv1: #ff3b52; --lv2: #ffb020; --lv3: #01abea; --lv4: #27d17a; --neutral: #5680b0; /* 维护者 2026-11-13:预警「已处置」用紫色高亮(四档语义色里没有紫色位)。 只服务设备详情事件列表的状态徽标,不并入 lv1–lv4 的优先级语义。 */ --status-handled: #a970ff; /* 点位状态统计:连接中断、无设备、未知状态、关联缺失各用独立颜色。 票 45(维护者裁定):「无关联设备」是**附加状态**,色键改**绿色系黄绿**(与正常在线同族、 与 lv4 正绿区分),且只在设备没有业务异常时替代正常态;业务异常按业务状态色显示。 */ --point-offline: #94a3b8; --point-empty: #c4d5e8; --point-unknown: #a970ff; --point-unassociated: #a3e635; /* ---- 行业语义色(2026-10-13 维护者要求:UI 与统计图表用行业色区分类别)---- 色值取自批次 1 入库的四枚行业切图主色(probe-industry-colors.mjs 实测): 燃气=火焰红 / 供水=水滴青 / 排水=雨滴绿 / 窨井=井盖紫。 消费点:条形图行业行、环形图行业扇区(PanelBlocks 的 toneColor 映射)。 */ --industry-gas: #fe3b53; --industry-water: #01abea; --industry-drainage: #27d17a; --industry-manhole: #a970ff; /* ---- 统计图表分类色(2026-10-13:堆叠条/环形图/条形图的非语义类别用)---- 维护者反馈「单色系分类分不清类别」+「工单状态要更明显的颜色区分」:给无业务语义 的类别一组可辨分类色(按维护者要求调整;不声称全部为蓝湖实测值)。 工单八态逐态落不同色相(见 panelBlocks.barTone):流程五态用蓝/橙/青/紫/青绿, 终态走业务语义色(已结案=绿、延期中=黄、已取消=红)——语义正确且彼此可辨。 消费点:stacked 分段/图例、donut 扇区/图例、bars 行(PanelBlocks toneColor 映射)。 */ --chart-c1: #1780ff; --chart-c2: #ff8a48; --chart-c3: #00b8ff; --chart-c4: #a970ff; --chart-c5: #00ceea; --chart-c6: #27d17a; --chart-c7: #ffb020; --chart-c8: #5680b0; /* ---- 文字 ---- 设计稿四级文字:标题/重点 #d7ecff(17px 面板标题、14px 条目)、正文 #88b7e8(12px)、 辅助 #5680b0(10px 时间戳/标注)、强调 #ffffff(KPI 数值/选中态)。 --text-strong 为本批新增(消费点:KPI 数值、选中态文字)。 */ --text: #d7ecff; --text-2: #88b7e8; --text-strong: #ffffff; --muted: #5680b0; /* ---- 字体 ---- 槽位名与语义由票 03 锁定;票 17(批次 4)只把白名单 Web 字体插到**系统回退链之前**, 回退链原样保留在后面 —— 子集外汉字(动态数据里的设备名/点位名/事件文本)落到系统字体。 Web 字体由 domain/fontFaces.js 按授权门禁注入 @font-face(规格 11):门禁不通过时 不存在对应 @font-face,浏览器解析不到该字族,自然继续往后落到系统栈,故本取值无需改动。 */ --font: "Noto Sans SC Subset", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; --num: "Rajdhani Subset", "Share Tech Mono Subset", "Bahnschrift SemiBold", "Bahnschrift", "DIN Alternate", "Segoe UI Semibold", var(--font); /* 顶栏系统栈(票 17 第四轮:筛选条/状态 chip 等小字用系统黑体——子集 Noto 在小字号+辉光上发虚)。 票 17 第七轮:--font-title 槽已撤销——设计稿(D2 nav 取证)菜单文字为 PingFang 常规体 (Apple 系统字体,按规格 11 走系统回退栈、不打包),选中态靠 nav/title-bg 切图底板 + 白色字, 无界黑失去全部消费点,槽位与 @font-face 一并移除(证据仍在归档,可随时恢复)。 */ --font-topbar: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; /* ---- 字号 ---- 2026-10-12 批次 1:维护者走查反馈「文字偏小、看不清」,整体上调 1px——该可读性结论 是真机走查得出的,本批沿用为基准(不按设计稿 10–12px 回退,登记为可读性偏差)。 --fs-kpi 为本批新增:面板 KPI 数值(设计稿 20px Rajdhani;消费点 PanelBlocks .panel-kpi__value)。设计稿另有大号指标 25px(主画板顶部状态区),现有面板结构无对应 消费点,按规格 03「无消费点不提交」暂不设槽位(票 15 已登记)。 */ /* 指标类型名称(KPI label / 卡片名)—— 维护者 2026-10-23「保持现状」,不要动这一档。 */ --fs-caption: calc(11.5 * var(--u)); --fs-body: calc(14 * var(--u)); --fs-title: calc(15.5 * var(--u)); --fs-heading: calc(18 * var(--u)); /* 指标数值是页面上**最大**的一类字(维护者 2026-10-23 第 1 条),但必须装得进格子 —— 2026-10-26 浏览器走查实测:在线率「27.3%」是 5 个字符,26u 时超出所在格子约 14px。 取 22u:仍明显大于块标题(18u)与名称(11.5u),且 5 字符在分格内放得下。 */ --fs-kpi: calc(22 * var(--u)); /* 补充说明(口径小字、块右上角小字、卡片备注、面板底部说明)—— 维护者 2026-10-23 第 3 条「字体大小缩小」,独立一档,不再和类型名称同号。 9.2u ≈ 名称的 0.8 倍:还在可读范围内,但明显退到第三层级。 */ --fs-note: calc(9.2 * var(--u)); /* ---- 间距 ---- 设计稿兄弟垂直间距众数 8u(×26),次众数 5/12/15;现有三档语义保留。 */ --space-1: calc(4 * var(--u)); --space-2: calc(8 * var(--u)); --space-3: calc(12 * var(--u)); /* ---- 布局尺寸 ---- */ /* 左右两栏的宽度(票 10 起两级详情浮层要贴着它让位,所以从组件样式提到这里只留一份)。 设计稿左右栏宽 347;2026-10-13 维护者反馈两侧面板稍宽、挤压中央一张图,收窄 5%(347→330)。 **2026-10-23 修:上限改成与 --u 同比**(维护者反馈「宽屏下面板太窄导致内容变形」)。 原先是 `clamp(280px, 330u, 460px)` —— 上限是**死数 460px**,而 --u 会随视口放大到 2, 于是大屏上"设计像素宽度"被压到 460/2 = 230u(设计稿是 330u),面板相对缩水 30%, 卡内文字却按 --u 放大 —— 一边放大一边挤,就是"内容变形"的观感。 现在上限取 `330u × 1.4 = 462u`(与下限同一坐标系、随 u 走),只是把原来的像素上限 换算成了设计像素上限,**比例在各分辨率下恒定**。 另加"不超过视口 22%"的护栏:极宽屏(32:9)上两栏各取 330u 会挤掉中央一张图。 */ --column-w: clamp(280px, calc(330 * var(--u)), min(calc(462 * var(--u)), 22vw)); /* 让位宽度(票 11 三轮):中央浮层/事件详情要避开"两侧面板占掉多少"。 正常(16:9)时就是一条栏宽;超宽屏(>= 3:1)时栏内两块并排,栏变成两条栏宽。 消费点用这一条而不是直接乘 --column-w —— 否则宽屏下浮层会压在面板上。 */ --rail-w: var(--column-w); /* 票 48:一张图**底部读数带**的高度(管线颜色图例贴带底,与两侧栏面板底边并排对齐)。 这条带上的东西不止一个:图例占 `bottom: 0`,定位反馈浮层(票 38)必须起算在这条带**之上**, 否则图例贴底后就压住浮层。两边共吃这一个数——写两个魔法数是「两处真相」的老毛病。 */ --map-bottom-band: calc(26 * var(--u)); /* ---- 层级 ---- */ --z-map: 0; --z-columns: 2; --z-overlay: 2; /* ---- 阴影 ---- 设计稿主阴影 #00071a@0.18 blur28 y12(46 处);维持现有模糊结构、取设计色。 */ --shadow: 0 18px 44px rgba(0, 7, 26, 0.55); /* ---- 滚动条 ---- 2026-10-13 维护者反馈:默认滚动条与 UI 格格不入。统一细滚动条: 轨道透明(面板底自透)、滑块用面板线色、hover 提亮为主色。 只允许竖向滚动;横向由各容器的 minmax(0,1fr) 网格 + overflow-wrap 保证不裁内容。 */ --scrollbar-size: calc(6 * var(--u)); --scrollbar-thumb: rgba(1, 171, 234, 0.35); --scrollbar-thumb-hover: rgba(1, 171, 234, 0.7); } /* 驾驶舱子树内的滚动条统一视觉(细、深色系、无默认灰白块)。 写在 .cockpit-shell 下靠继承作用域,不漏进宿主应用。 */ .cockpit-shell * { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; } .cockpit-shell *::-webkit-scrollbar { width: var(--scrollbar-size); height: 0; /* 横向滚动条严格不出现(高度 0 隐藏;容器本身 overflow-x 不产生横向滚动) */ } .cockpit-shell *::-webkit-scrollbar-track { background: transparent; } .cockpit-shell *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } .cockpit-shell *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } .cockpit-shell *::-webkit-scrollbar-corner { background: transparent; }