深浅色主题统一修复方案

版本：1.0
创建时间：2026-03-17
目标：统一所有页面使用 CSS Variables，确保完美的深浅色主题适配

---

📋 问题分析

当前问题：

• ❌ CopyGenerator 页面使用硬编码颜色
• ❌ Dashboard 页面使用硬编码颜色
• ❌ PosterGenerator 页面使用硬编码颜色
• ❌ VideoGenerator 页面使用硬编码颜色
• ❌ 所有组件的样式没有统一使用 CSS Variables

已有的 CSS Variables（定义在 utils/theme.js）：

// 背景色
--hotel-bg-page
--hotel-bg-surface
--hotel-bg-surface-secondary
--hotel-bg-sage
--hotel-bg-dusty

// 文字色
--hotel-text-primary
--hotel-text-secondary
--hotel-text-tertiary
--hotel-text-placeholder

// 边框色
--hotel-border-light
--hotel-border
--hotel-border-dark

// 主色
--hotel-color-primary
--hotel-color-primary-light
--hotel-color-primary-lighter

// 莫兰迪色
--hotel-mocha
--hotel-mocha-bg
--hotel-sage
--hotel-sage-bg
--hotel-dusty
--hotel-dusty-bg
--hotel-slate
--hotel-slate-bg

---

🎯 修复方案

修复原则：

1. 所有硬编码颜色替换为 CSS Variables
2. 统一使用 theme.js 中定义的变量
3. 确保深色模式完美适配

---

📝 修复清单

需要修复的文件：

文件	优先级	状态
styles/views/copy-generator/Index.scss	P0	待修复
styles/views/dashboard/Index.scss	P0	部分完成
styles/views/poster-generator/Index.scss	P1	待检查
styles/views/video-generator/Index.scss	P1	待检查
styles/components/SmartCreatorInput.scss	P1	待检查

---

🔧 具体修复步骤

Step 1：修复 CopyGenerator 样式

文件：styles/views/copy-generator/Index.scss

需要替换的颜色：

硬编码颜色	替换为 CSS Variable
#f5f7fa	var(--hotel-bg-page)
#f0f4f8	var(--hotel-bg-surface)
#e8eef4	var(--hotel-bg-surface-secondary)
#1a202c	var(--hotel-text-primary)
#2d3748	var(--hotel-text-primary)
#4a5568	var(--hotel-text-secondary)
#718096	var(--hotel-text-tertiary)
rgba(226, 232, 240, 0.5)	var(--hotel-border-light)
rgba(255, 255, 255, 0.98)	var(--hotel-bg-surface)
rgba(248, 250, 252, 0.95)	var(--hotel-bg-surface)

---

Step 2：验证 Dashboard 样式

文件：styles/views/dashboard/Index.scss

✅ 已完成（之前已修复）

---

Step 3：检查并修复其他页面

待检查文件：

• styles/views/poster-generator/Index.scss
• styles/views/video-generator/Index.scss
• styles/components/SmartCreatorInput.scss

---

🎨 修复示例

修复前（硬编码）：

.copy-generator {
  padding: 32px;
  background: linear-gradient(
    135deg,
    #f5f7fa 0%,
    #f0f4f8 25%,
    #e8eef4 50%,
    #f0f4f8 75%,
    #f5f7fa 100%
  );
  min-height: 100vh;
}

修复后（CSS Variables）：

.copy-generator {
  padding: 32px;
  background: var(--hotel-bg-page);
  min-height: 100vh;
}

---

🚀 执行计划

当前进度：

• ✅ Dashboard 样式修复完成
• ⏳ CopyGenerator 样式待修复
• ⏳ PosterGenerator 样式待检查
• ⏳ VideoGenerator 样式待检查

---

文档维护：产品技术团队
最后更新：2026-03-17