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

name, overview, todos

name	overview	todos
layouts-dark-light-adaptation	修复 layouts 下未做 dark/light 主题适配的硬编码样式，统一改用 --fms-* token。	id content status fix-apptabs-active 修改 AppTabs.vue 激活态与关闭按钮的硬编码白色为 var(--fms-primary-text) 与 color-mix 派生 completed id content status fix-apptopbar-check 修改 AppTopbar.vue .check 对勾 color:#fff 为 var(--fms-primary-text) completed id content status dependencies lint-check 运行 pnpm lint 静态检查确认无新增告警 completed 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）。