20260817225227

code/fms/.codebuddy/plans/layouts-dark-light-adaptation_aa221499.md

@@ -0,0 +1,74 @@
+---
+name: layouts-dark-light-adaptation
+overview: 修复 layouts 下未做 dark/light 主题适配的硬编码样式，统一改用 --fms-* token。
+todos:
+  - id: fix-apptabs-active
+    content: 修改 AppTabs.vue 激活态与关闭按钮的硬编码白色为 var(--fms-primary-text) 与 color-mix 派生
+    status: completed
+  - id: fix-apptopbar-check
+    content: 修改 AppTopbar.vue .check 对勾 color:#fff 为 var(--fms-primary-text)
+    status: completed
+  - id: lint-check
+    content: 运行 pnpm lint 静态检查确认无新增告警
+    status: completed
+    dependencies:
+      - fix-apptabs-active
+      - fix-apptopbar-check
+---
+
+## 用户需求
+
+检查 `src/layouts` 下所有文件并结合 `src/theme/tokens.css`，定位未做 dark/light 模式适配的硬编码样式，并用 `--fms-*` token 替换修复，使其跟随主题切换。
+
+## 产品概述
+
+FMS Vue 前端布局壳（顶栏 / 侧栏 / 页签 / 导航菜单）基于 `tokens.css` 的 CSS 变量做深浅色适配。本次仅修复布局层残留的硬编码颜色，保证切换深色模式时视觉一致。
+
+## 核心功能
+
+- 修复 `AppTabs.vue` 激活页签的硬编码白色文字与关闭按钮白色（含 hover 态），改用 `var(--fms-primary-text)` 及基于主色文字色的 `color-mix` 派生。
+- 修复 `AppTopbar.vue` 主题色板选中对勾的硬编码 `color: #fff`，改用 `var(--fms-primary-text)`。
+- 保持其余已正确使用 token 的样式不变（DefaultLayout / AppSidebar / NavMain / NavMenuItem 及 AppTopbar 其他部分均无需改动）。
+
+## 技术栈
+
+- Vue 3 `<script setup>` + SCSS（scoped）+ CSS 变量（`:root` 浅色 / `.dark` 深色，主色 `--fms-primary` 由 JS 写入，`--fms-primary-text` 语义色）。
+- 适配方式：所有颜色引用 `--fms-*` token；半透明白使用 `color-mix(in srgb, var(--fms-primary-text) x%, transparent)` 派生，不裸写 `rgba(255,255,255,...)`。
+
+## 实现方案
+
+逐项替换 layouts 下两处文件的硬编码颜色，全部复用现有 token，不新增 token、不改 JS 逻辑：
+
+1. **AppTabs.vue 激活态**
+
+- `.fms-tab.is-active`：`color: #fff` → `color: var(--fms-primary-text)`；`background/border-color` 已用 `var(--fms-primary)`，保持。
+- `.fms-tab.is-active .fms-tab-close`：`color: rgba(255,255,255,0.85)` → `color: color-mix(in srgb, var(--fms-primary-text) 85%, transparent)`；hover 背景 `rgba(255,255,255,0.22)` → `color-mix(in srgb, var(--fms-primary-text) 22%, transparent)`；`color: #fff` → `var(--fms-primary-text)`。
+- 理由：`#fff` 在浅色主色（墨蓝 `#0f172b`）下成立，但用户可切换主色且深色模式下主色文字语义由 `--fms-primary-text` 统一表达，裸白会破坏换肤一致性。
+
+2. **AppTopbar.vue 色板对勾**
+
+- `.check { color: #fff }` → `color: var(--fms-primary-text)`。彩色块源于主色/预设色，对勾需高对比，`primary-text` 在浅色为白、深色主色深时仍为白，视觉等价且符合规范。
+
+## 实现要点
+
+- 仅改 scoped `<style>`，不动 `<script>`/`<template>`。
+- 沿用项目现有 `color-mix` 派生写法（参考 `AppTopbar.vue` 搜索框 `color-mix(in srgb, var(--fms-secondary-hover) 50%, var(--fms-card))`），保持一致。
+- 不引入过渡/动画之外的额外复杂度；`prefers-reduced-motion` 已处理，无需改动。
+- 按开发规范：修改后只做静态检查（oxlint），不主动 `pnpm build` / 启动服务，除非用户要求。
+
+## 架构与目录
+
+仅修改以下两个文件（均属 `src/layouts`）：
+
+```
+src/layouts/components/AppTabs.vue    # [MODIFY] 激活态与关闭按钮颜色改用 primary-text / color-mix
+src/layouts/components/AppTopbar.vue # [MODIFY] .check 对勾颜色改用 primary-text
+```
+
+其余 `DefaultLayout.vue` / `AppSidebar.vue` / `NavMain.vue` / `NavMenuItem.vue` 经核查已正确使用 token，不在本次改动范围。
+
+## 验证
+
+- 浅色模式：激活页签文字/对勾为白（主色墨蓝，primary-text=白），与现状一致。
+- 切换深色模式（`.dark`）：`--fms-primary-text` 维持白，激活态与对勾仍清晰；若未来主色改为浅色，`primary-text` 会反转，样式自动跟随。
+- 运行 `pnpm lint`（oxlint）确认无新增告警（不主动 build）。