LabelingSystem/web/apps/lq_label/THEME_FIX_SUMMARY.md

主题颜色控制修复总结

问题描述

用户报告了以下主题相关的问题：

1. 标注页面 Header Bar 颜色不受主题控制

   • 使用了 Tailwind 类 bg-primary-background、border-neutral-border 等
   • 这些类不会随主题切换而改变

2. 项目列表页面标题在深色模式下显示不佳

   • 标题颜色在深色模式下为黑色，对比度不够

3. 任务数量徽章在深色模式下显示不佳

   • 当任务数量为 0 时，badgeInactive 样式在深色模式下不够明显

修复方案

1. 标注页面（AnnotationView）

问题

Header bar 使用了 Tailwind 类，不受主题系统控制：

<div className="flex items-center justify-between p-comfortable border-b border-neutral-border bg-primary-background">

解决方案

在 annotation-view.module.scss 中添加主题感知的样式类：

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-background);
}

.headerLeft {
  display: flex;
  align-items: center;
  gap: 24px;
}

.headerRight {
  display: flex;
  align-items: center;
  gap: 12px;
}

.taskInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.taskName {
  font-size: 16px;
  font-weight: 600;
  color: var(--theme-headline);
  margin: 0;
}

.taskMeta {
  font-size: 13px;
  color: var(--theme-paragraph-subtle);
  margin: 0;
}

在 TSX 文件中替换为 CSS 模块类：

<div className={styles.header}>
  <div className={styles.headerLeft}>
    {/* ... */}
    <div className={styles.taskInfo}>
      <h1 className={styles.taskName}>{currentTask.name}</h1>
      <p className={styles.taskMeta}>项目: {currentProject.name} | 进度: {currentTask.progress}%</p>
    </div>
  </div>
  <div className={styles.headerRight}>
    {/* ... */}
  </div>
</div>

2. 编辑器测试页面（EditorTest）

问题

与标注页面相同，使用了 Tailwind 类。

解决方案

添加相同的样式类到 editor-test.module.scss：

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  border-bottom: 1px solid var(--theme-border);
  background: var(--theme-background);
}

.headerLeft {
  display: flex;
  align-items: center;
  gap: 24px;
}

.headerRight {
  display: flex;
  align-items: center;
  gap: 12px;
}

.headerInfo {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.headerTitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--theme-headline);
  margin: 0;
}

.headerSubtitle {
  font-size: 13px;
  color: var(--theme-paragraph-subtle);
  margin: 0;
}

3. 项目列表页面徽章样式优化

问题

badgeInactive 在深色模式下对比度不够：

.badgeInactive {
  background: var(--theme-background-secondary);
  color: var(--theme-paragraph-subtle);
}

解决方案

使用更深的背景色和更明显的文本色，并添加边框：

.badgeInactive {
  background: var(--theme-background-tertiary);
  color: var(--theme-paragraph);
  border: 1px solid var(--theme-border);
}

这样在三种主题下都有更好的对比度：

• 白色主题：浅灰背景 + 深灰文本 + 边框
• 深色主题：深灰背景 + 浅灰文本 + 边框
• 护眼主题：暖色背景 + 棕色文本 + 边框

4. 修复 CSS 警告

问题

SCSS 警告：需要同时定义标准属性 line-clamp

解决方案

.projectDescription {
  font-size: 13px;
  color: var(--theme-paragraph-subtle);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-clamp: 1;  // 添加标准属性
  overflow: hidden;
}

主题变量使用

所有修复都使用了主题系统的 CSS 变量：

背景色

• --theme-background - 主背景色
• --theme-background-secondary - 次要背景色
• --theme-background-tertiary - 第三级背景色

文本色

• --theme-headline - 标题文本色
• --theme-paragraph - 正文文本色
• --theme-paragraph-subtle - 次要文本色

边框

• --theme-border - 边框颜色

按钮

• --theme-button - 按钮背景色
• --theme-button-text - 按钮文本色

三种主题下的效果

白色主题（Light）

• Header 背景：纯白色 (#ffffff)
• 标题文本：深黑色 (#1a1a1a)
• 边框：浅灰色 (#e5e7eb)
• 徽章背景：浅灰色 (#f1f3f5)
• 徽章文本：中灰色 (#4a4a4a)

深色主题（Dark）

• Header 背景：深蓝灰 (#0f172a)
• 标题文本：浅白色 (#f1f5f9)
• 边框：深灰色 (#334155)
• 徽章背景：中灰色 (#334155)
• 徽章文本：浅灰色 (#cbd5e1)

护眼主题（Eye-Care）

• Header 背景：暖米色 (#f9f4ef)
• 标题文本：深蓝色 (#020826)
• 边框：暖灰色 (#d4c4b0)
• 徽章背景：暖灰色 (#e5d4c1)
• 徽章文本：棕色 (#716040)

修改的文件

新增样式

• web/apps/lq_label/src/views/annotation-view/annotation-view.module.scss - 添加 header 相关样式
• web/apps/lq_label/src/views/editor-test/editor-test.module.scss - 添加 header 相关样式

修改的文件

• web/apps/lq_label/src/views/annotation-view/annotation-view.tsx - 替换 Tailwind 类为 CSS 模块
• web/apps/lq_label/src/views/editor-test/editor-test.tsx - 替换 Tailwind 类为 CSS 模块
• web/apps/lq_label/src/views/project-list-view/project-list-view.module.scss - 优化 badgeInactive 样式

测试建议

1. 切换主题测试

   • 在标注页面切换三种主题
   • 检查 header bar 的背景色和文本色是否正确变化
   • 检查边框颜色是否跟随主题

2. 项目列表测试

   • 在深色模式下查看项目列表
   • 检查标题文本是否清晰可读
   • 检查 0 任务的徽章是否有足够对比度

3. 任务列表测试

   • 在三种主题下查看任务列表
   • 检查所有文本和徽章的可读性

总结

本次修复确保了所有页面元素都正确使用主题系统的 CSS 变量，实现了：

✅ 标注页面 header bar 完全受主题控制 ✅ 编辑器测试页面 header bar 完全受主题控制 ✅ 项目列表页面在所有主题下都有良好的对比度 ✅ 任务数量徽章在深色模式下更加明显 ✅ 修复了 CSS 警告

所有修改都遵循了主题系统的设计原则，确保在三种主题模式下都有良好的视觉效果和可读性。