74 lines
4.2 KiB
Markdown
74 lines
4.2 KiB
Markdown
---
|
||
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）。 |