一刻工坊

外观

任务详情抽屉主题统一优化 ​

优化目标 ​

将"我的 30 天行动日历"中任务详情弹出抽屉的样式统一为全局深色主题风格。

问题分析 ​

优化前的问题 ​

样式不统一：

  • ❌ 使用硬编码的 SCSS 变量（$primary: #7c3aed）
  • ❌ 背景使用白色渐变（rgba(255, 255, 255, 0.95)）
  • ❌ 阴影、边框使用硬编码的颜色值
  • ❌ 与全局深色主题不协调，显得突兀

视觉问题：

  • 抽屉背景太亮（白色渐变）
  • 卡片背景不匹配深色主题
  • 边框颜色不统一
  • 按钮样式与主题脱节

优化方案 ​

核心策略：使用 CSS 主题变量 ​

将所有硬编码颜色替换为全局 CSS 变量：

  • var(--bg-card) - 卡片背景 #16161f
  • var(--bg-secondary) - 次级背景 #12121a
  • var(--bg-tertiary) - 第三级背景 #1a1a24
  • var(--bg-hover) - 悬停背景 #1e1e2a
  • var(--border-color) - 边框颜色 #2a2a3a
  • var(--border-light) - 浅色边框 #3a3a4a
  • var(--shadow-sm/md) - 主题阴影
  • var(--primary-gradient) - 主题渐变

详细修改 ​

1. 删除 SCSS 变量定义 ​

修改前：

scss
// 主题色
$primary: #7c3aed;
$primary-light: #8b5cf6;
$primary-dark: #6d28d9;
$success: #22c55e;
$success-dark: #16a34a;
// ...

修改后：

scss
// 删除所有 SCSS 变量，改用 CSS 变量

2. 抽屉头部和主体 ​

修改前：

scss
:deep(.el-drawer__body) {
  padding: 20px 24px 24px;
  background: linear-gradient(to bottom, rgba(124, 58, 237, 0.02), transparent 200px);
}

修改后：

scss
:deep(.el-drawer__header) {
  background: var(--bg-card);
}

:deep(.el-drawer__body) {
  padding: 20px 24px 24px;
  background: var(--bg-card);  // 统一深色背景
}

3. 平台徽章 ​

修改前：

scss
.platform-badge {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.2);
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

修改后：

scss
.platform-badge {
  box-shadow: var(--shadow-sm);  // 使用主题阴影
  border: 1px solid rgba(255, 255, 255, 0.1);  // 减轻边框
  
  &:hover {
    box-shadow: var(--shadow-md);
  }
  
  // 平台品牌色保留（抖音、小红书等）
}

4. 工作流标签 ​

修改前：

scss
.workflow-tag {
  background: linear-gradient(135deg, rgba($primary, 0.1), rgba(#3b82f6, 0.05));
  color: $primary;
  border: 2px solid rgba($primary, 0.3);
}

修改后：

scss
.workflow-tag {
  background: var(--bg-tertiary);
  color: var(--primary-light);
  border: 1px solid var(--border-light);
  
  &:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
  }
}

5. 任务标题 ​

修改前：

scss
.task-title {
  background: linear-gradient(135deg, rgba($primary, 0.08), rgba(#3b82f6, 0.05));
  border-left: 4px solid $primary;
  box-shadow: 0 2px 8px rgba($primary, 0.1);
}

修改后：

scss
.task-title {
  background: var(--bg-secondary);
  border-left: 4px solid var(--primary);
  box-shadow: var(--shadow-sm);
}

6. 任务元信息区 ​

修改前：

scss
.task-meta {
  background: linear-gradient(135deg, rgba($primary, 0.08), rgba(#3b82f6, 0.05));
  border: 2px solid rgba($primary, 0.2);
  box-shadow: 0 2px 8px rgba($primary, 0.08);
}

修改后：

scss
.task-meta {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

7. 工具按钮 ​

修改前：

scss
.tool-btn {
  background: linear-gradient(135deg, rgba($primary, 0.1), rgba(#3b82f6, 0.05));
  border: 2px solid rgba($primary, 0.25);
  color: $primary;
  
  &:hover {
    background: linear-gradient(135deg, rgba($primary, 0.15), rgba(#3b82f6, 0.1));
    color: $primary-dark;
  }
}

修改后：

scss
.tool-btn {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  color: var(--primary-light);
  box-shadow: var(--shadow-sm);
  
  &:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: var(--shadow-md);
  }
}

8. 内容区块（section） ​

修改前：

scss
.section {
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.95), rgba($primary, 0.02));
  border: 2px solid rgba($primary, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  
  h3 {
    color: $primary;
    border-bottom: 2px solid rgba($primary, 0.15);
  }
}

修改后：

scss
.section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  
  &:hover {
    border-color: var(--border-light);
    box-shadow: var(--shadow-md);
  }
  
  h3 {
    color: var(--primary-light);
    border-bottom: 1px solid var(--border-color);
  }
}

9. 执行指南列表 ​

修改前：

scss
.guide-list li::before {
  background: linear-gradient(135deg, $success, $success-dark);
  box-shadow: 0 2px 6px rgba($success, 0.3);
}

修改后：

scss
.guide-list li::before {
  background: var(--success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

10. 参考内容框 ​

修改前：

scss
.reference-box {
  background: linear-gradient(135deg, rgba($primary, 0.1), rgba(#3b82f6, 0.05));
  border: 2px solid rgba($primary, 0.2);
  
  &::before {
    color: rgba($primary, 0.2);  // 引号颜色
  }
}

修改后：

scss
.reference-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  
  &::before {
    color: var(--text-tertiary);  // 引号颜色
  }
}

11. 底部操作区 ​

修改前：

scss
.drawer-footer {
  border-top: 2px solid rgba($primary, 0.15);
  background: linear-gradient(to top, rgba($primary, 0.03), transparent);
}

修改后：

scss
.drawer-footer {
  border-top: 1px solid var(--border-color);
  background: var(--bg-card);
}

12. 按钮样式 ​

完成按钮（成功）：

scss
// 修改前
background: linear-gradient(135deg, $success, $success-dark);
box-shadow: 0 4px 12px rgba($success, 0.3);

// 修改后
background: var(--success);
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);

默认按钮：

scss
// 修改前
background: white;
border: 2px solid rgba($primary, 0.4);
color: $primary;

// 修改后
background: var(--bg-tertiary);
border: 1px solid var(--border-light);
color: var(--primary-light);

主操作按钮：

scss
// 修改前
background: linear-gradient(135deg, $primary, $primary-dark);
box-shadow: 0 4px 12px rgba($primary, 0.35);

// 修改后
background: var(--primary-gradient);
box-shadow: var(--shadow-glow);

13. 评分组件 ​

修改前：

vue
<el-rate text-color="#ff9900" />

修改后：

vue
<el-rate />  <!-- 使用主题默认颜色 -->

主题变量映射表 ​

原硬编码值CSS变量实际值用途
rgba(255, 255, 255, 0.95)var(--bg-card)#16161f卡片背景
rgba(124, 58, 237, 0.08)var(--bg-secondary)#12121a次级背景
rgba($primary, 0.1)var(--bg-tertiary)#1a1a24第三级背景
rgba(0, 0, 0, 0.1)var(--shadow-sm)主题小阴影阴影效果
rgba($primary, 0.15)var(--border-color)#2a2a3a边框
$primaryvar(--primary)#7c3aed主题色
$primary-lightvar(--primary-light)#a78bfa主题浅色
$successvar(--success)#10b981成功色
$warningvar(--warning)#f59e0b警告色

视觉效果对比 ​

优化前（浅色） ​

┌─────────────────────────────────┐
│ 🎯 任务详情                     │ ← 白色背景
├─────────────────────────────────┤
│ 📱 抖音  |  口播                 │ ← 浅色卡片
│                                 │
│ ┌───────────────────────────┐   │
│ │ 任务标题（白色背景）      │   │ ← 太亮
│ └───────────────────────────┘   │
│                                 │
│ ┌───────────────────────────┐   │
│ │ 执行指南（白色卡片）      │   │ ← 太亮
│ └───────────────────────────┘   │
└─────────────────────────────────┘

优化后（深色） ​

┌─────────────────────────────────┐
│ 🎯 任务详情                     │ ← 深色背景 #16161f
├─────────────────────────────────┤
│ 📱 抖音  |  口播                 │ ← 深色系
│                                 │
│ ┌───────────────────────────┐   │
│ │ 任务标题（深色背景）      │   │ ← #12121a
│ └───────────────────────────┘   │
│                                 │
│ ┌───────────────────────────┐   │
│ │ 执行指南（深色卡片）      │   │ ← #12121a
│ └───────────────────────────┘   │
└─────────────────────────────────┘

修改详情 ​

修改的文件 ​

frontend/src/components/plan/TaskDrawer.vue

样式对比清单 ​

元素修改前修改后说明
抽屉背景白色渐变var(--bg-card)深色卡片背景
抽屉头部无背景var(--bg-card)统一背景
标题渐变$primaryvar(--primary-gradient)使用主题渐变
工作流标签浅紫色渐变var(--bg-tertiary)深色背景
任务标题区白色渐变var(--bg-secondary)深色背景
元信息区浅紫色渐变var(--bg-secondary)深色背景
工具按钮浅紫色渐变var(--bg-tertiary)深色背景
内容区块白色渐变 ❌var(--bg-secondary) ✅关键修复
参考内容框浅紫色渐变var(--bg-tertiary)深色背景
底部操作区浅色渐变var(--bg-card)深色背景
边框颜色硬编码 RGBAvar(--border-color)统一边框
阴影硬编码 RGBAvar(--shadow-sm/md)统一阴影
文本颜色$primaryvar(--primary-light)适配深色背景

保留的品牌色 ​

以下平台徽章保留品牌色（这是设计特色）：

  • 抖音：黑色渐变 #000000 → #333333
  • 小红书：红色渐变 #ff2442 → #ff4d5f
  • 视频号：绿色渐变 #07c160 → #06ad56
  • B站：蓝色渐变 #00a1d6 → #0084b0
  • 快手：橙色渐变 #ff6600 → #ff7c1f

优化效果 ​

颜色深度对比 ​

层级背景色用途
1级#16161f抽屉主背景、卡片背景
2级#12121a次级背景、任务标题、元信息
3级#1a1a24第三级背景、工具按钮、标签
悬停#1e1e2a所有悬停效果

层次感设计 ​

最深: #0a0a0f (页面主背景)
  ↓
深色: #12121a (次级区域)
  ↓
中色: #16161f (卡片背景)
  ↓
浅色: #1a1a24 (内容区域)
  ↓
最浅: #1e1e2a (悬停效果)

用户体验改进 ​

1. 视觉一致性 ✅ ​

  • 与全局深色主题完全统一
  • 不再有突兀的白色区域
  • 整体视觉和谐

2. 信息层级清晰 ✅ ​

  • 通过不同深度的深色背景区分层级
  • 主题色（紫色）用于强调和引导
  • 平台品牌色保留，识别度高

3. 阅读舒适度 ✅ ​

  • 深色背景降低眼睛疲劳
  • 文字对比度适中
  • 长时间使用更舒适

4. 交互反馈增强 ✅ ​

  • 悬停效果更明显（背景变化）
  • 按钮动画统一（上移 + 阴影）
  • 平滑过渡（0.3s ease）

技术细节 ​

CSS 变量的优势 ​

  1. 主题切换便捷

    • 只需修改 CSS 变量定义
    • 所有组件自动适配
    • 无需逐个修改

  2. 代码可维护性

    • 集中管理颜色
    • 避免硬编码
    • 易于调整和优化

  3. 兼容性好

    • 现代浏览器完全支持
    • 有回退机制
    • 性能优异

响应式设计 ​

保持所有响应式样式不变：

scss
@media (max-width: 768px) {
  .task-header {
    flex-direction: column;
  }
  
  .footer-actions {
    flex-direction: column;
  }
}

测试清单 ​

  • [x] 抽屉背景使用深色主题
  • [x] 抽屉头部样式统一
  • [x] 标题渐变效果正常
  • [x] 平台徽章显示正确
  • [x] 工作流标签深色背景
  • [x] 任务标题区深色背景
  • [x] 元信息区深色背景
  • [x] 工具按钮深色背景
  • [x] 内容区块深色背景
  • [x] 参考内容框深色背景
  • [x] 底部操作区深色背景
  • [x] 按钮悬停动画正常
  • [x] 评分组件颜色统一
  • [x] 移动端布局正常
  • [x] 整体视觉和谐

兼容性说明 ​

保留的元素 ​

以下元素保持原有设计特色：

  1. 平台品牌色 - 抖音、小红书等平台徽章保留品牌渐变色
  2. 成功色按钮 - 完成任务按钮使用绿色（var(--success)）
  3. 主操作按钮 - 使用主题渐变（var(--primary-gradient)）

动画效果 ​

所有交互动画保持不变：

  • 悬停上移（-2px 或 -3px）
  • 阴影加深效果
  • 平滑过渡（0.3s ease）
  • 点击回弹反馈

相关文档 ​

优化日期: 2025-12-13
优化版本: v3.0
影响范围: 任务详情抽屉
状态: ✅ 已完成

© 2024-2025 趣美丽 QuMeiLi · Powered by 刻流星引擎 KeLiuXing

AI 原生全流程内容创作平台