jkooe
4e6eb32929
原配色是深色 + 品牌青绿（#63e2b7）+ naive-ui 默认绿主色 —— 颜色种类多。 改为两套**只用中性灰阶**的主题，侧栏底部一行切换，选择存 localStorage： 简约白 页底 #f4f4f5 ／ 侧栏 #fafafa ／ 卡片 #ffffff 高级灰 页底 #1d1f22 ／ 侧栏 #181a1d ／ 卡片 #24262a 几处刻意的选择： 1. 白主题页底**不是纯白**。卡片本身是白的，两者同色就只能靠 1px 分线撑层次， 整页发「糊」；压一档浅灰后层次为「页底 < 侧栏 < 卡片」，且仍是白为主。 2. 主色位（naive-ui 的 primary）改**中性灰** —— 主按钮、开关激活态、进度条、 勾选框全吃这一个值。原来它们是绿色/青绿，正是「配色不简单」的主因。 3. 语义色（成功/警告/错误/信息）**降饱和而非去掉**。这是运维工具， 「运行中 / 出错」必须一眼可辨，全部灰化会导致误读。故它们只出现在徽章与 告警这类**小面积**上，底色观感仍是「白 + 灰」。 4. **色值只定义一份**：src/theme/index.ts 的 Palette 既生成 naive-ui 的 themeOverrides，又由 App.vue 运行期注入成 --na-* CSS 变量。 若「TS 调色板」与「CSS 写死色值」各存一份，换主题时会**一半新一半旧、 不报错、类型也抓不到** —— 正是本轮要消灭的失效模式。 为此清掉散在 8 个文件里的 17 处写死色值（日志三流着色、代码块底色、 节点选中边框、历史悬停…），复扫后自定义样式里硬编码色为 0。 5. 主题**只存 localStorage**，不落 Rust 侧 settings：那套 Settings 是给 「仅服务模式」（无窗口、常驻托盘）也生效的偏好用的；主题是纯图形偏好， 没有窗口时毫无意义 —— 为一件纯前端的事去动 Rust 命令面与契约守卫不划算。 6. index.html 内联一小段脚本做**首帧防闪**（否则深色用户每次启动闪一帧白）。 此处**刻意重复 2 个底色值**，已在 index.html 与 theme/index.ts 两处注明 「改底色时同步」—— 因为在它执行之前没有任何模块可依赖； 除此之外全应用再无第二份色值。 验证：vue-tsc 0 错 ｜ 契约守卫 6/6 ｜ 单测 280/280 ｜ .app 重打通过（92.22 MiB）｜ 两套主题均以真实采集数据回填渲染核对 —— 截图脚本顺带读回 --na-bg 与 body 背景， 确认主题真的切过去了，而不是「看起来像」。
29 lines
1.1 KiB
HTML
29 lines
1.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>nodeagent 控制台</title>
|
|
<script>
|
|
// 首帧防闪：Vue 接管之前浏览器已经会画一次背景，若不先刷上——
|
|
// 「高级灰」用户每次启动都会看到一帧刺眼的白。
|
|
//
|
|
// 此处只重复**两个**底色值（真值在 src/theme/index.ts），因为在此之前
|
|
// 没有任何模块可依赖；其余所有颜色仍由 App.vue 运行期注入的 --na-* 负责。
|
|
// 改调色板底色时记得同步这两行。
|
|
try {
|
|
var isGray = localStorage.getItem("nodeagent.console.theme") === "gray";
|
|
document.documentElement.style.background = isGray ? "#1d1f22" : "#f4f4f5";
|
|
document.documentElement.style.colorScheme = isGray ? "dark" : "light";
|
|
} catch (e) {
|
|
/* localStorage 不可用（隐私模式）时走默认底色即可 */
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|