TaskDrawer 任务抽屉升级说明

更新概述

对"30 天行动日历"中的任务详情抽屉进行了全面的视觉升级，统一了主题风格，并将所有平台拼音替换为中文显示。

主要更新

1. 🎨 统一主题风格

整体风格升级

• 背景渐变：抽屉背景添加了主题色渐变效果
• 阴影效果：所有卡片和按钮都使用了统一的阴影样式
• 圆角统一：统一使用 12-16px 的圆角
• 悬停效果：添加了流畅的悬停动画和提升效果

主题色定义

$primary: #7c3aed;        // 主色 - 紫色
$primary-light: #8b5cf6;  // 浅紫色
$primary-dark: #6d28d9;   // 深紫色
$success: #22c55e;        // 成功色 - 绿色
$success-dark: #16a34a;   // 深绿色

2. 📱 平台标识升级

平台徽章设计

每个平台都有独特的渐变背景和图标：

平台	中文名称	图标	渐变色
douyin	抖音	📱	黑色渐变 (#000 → #333)
xiaohongshu	小红书	📕	红色渐变 (#ff2442 → #ff4d5f)
wechat_video	视频号	💚	绿色渐变 (#07c160 → #06ad56)
bilibili	B站	📺	蓝色渐变 (#00a1d6 → #0084b0)
kuaishou	快手	⚡	橙色渐变 (#ff6600 → #ff7c1f)

效果示例：

┌─────────────────────────┐
│ 📱 抖音  口播          │  ← 平台徽章
└─────────────────────────┘

3. 🔧 组件优化

任务标题

• 添加了渐变背景
• 左侧紫色边框强调
• 悬停时轻微位移效果
• 阴影增强

任务元信息

• 任务难度星级评分
• 预计时间显示（带时钟图标）
• 渐变背景卡片
• 统一的视觉风格

执行指南

• 绿色勾选图标（圆形带阴影）
• 清晰的步骤列表
• 优化的行高和间距

推荐工具

• 渐变背景按钮
• 图标和文字组合
• 悬停时提升效果
• 主题色边框

底部操作按钮

• 标记完成：绿色渐变（已完成状态）/ 白色边框（未完成状态）
• 立即执行：紫色渐变，主操作按钮
• 统一 52px 高度
• 流畅的悬停和按下效果

4. 🌍 平台名称国际化

创建了统一的平台映射工具 platformMapper.js：

import { getPlatformName, getPlatformIcon } from '@/utils/platformMapper'

// 使用示例
getPlatformName('douyin')        // '抖音'
getPlatformIcon('xiaohongshu')   // '📕'

5. 📱 响应式设计

添加了移动端适配：

• 平台标签垂直排列
• 元信息卡片垂直布局
• 按钮全宽显示
• 优化的触摸体验

文件变更

修改的文件

1. frontend/src/components/plan/TaskDrawer.vue

   • 重构了整体布局和样式
   • 添加平台徽章组件
   • 统一主题色和阴影
   • 优化交互动画

2. 新增文件：frontend/src/utils/platformMapper.js

   • 平台名称映射
   • 平台图标映射
   • 平台颜色配置
   • 工具函数导出

视觉对比

更新前

┌─────────────────────┐
│ 任务详情            │
├─────────────────────┤
│ DOUYIN  口播        │  ← 拼音大写
│                     │
│ 发布第一条口播视频   │
│                     │
│ 基础样式            │
└─────────────────────┘

更新后

┌─────────────────────────────┐
│ 任务详情 ✨                 │
├─────────────────────────────┤
│ 📱 抖音  口播              │  ← 中文 + 图标
│                             │
│ ╔═══════════════════════╗  │
│ ║ 发布第一条口播视频     ║  │  ← 渐变背景
│ ╚═══════════════════════╝  │
│                             │
│ 🎯 任务目标                │
│ ━━━━━━━━━━━━━━━━━━━━━━   │
│ 建立账号基础认知...         │
│                             │
│ 📝 执行指南                │
│ ━━━━━━━━━━━━━━━━━━━━━━   │
│ ✓ 确定选题方向...          │
│ ✓ 使用 AI 生成...          │
│                             │
│ 🛠️ 推荐工具                │
│ ━━━━━━━━━━━━━━━━━━━━━━   │
│ [📝 脚本引擎] [🎙️ 声音工坊] │
│                             │
│ ┌──────────┬──────────────┐│
│ │标记完成   │🚀 立即执行    ││  ← 统一按钮风格
│ └──────────┴──────────────┘│
└─────────────────────────────┘

技术细节

SCSS 变量

所有主题色都定义为 SCSS 变量，便于全局修改：

$primary: #7c3aed;
$primary-light: #8b5cf6;
$primary-dark: #6d28d9;
$success: #22c55e;
$success-dark: #16a34a;

渐变效果

统一使用 135度 渐变：

background: linear-gradient(135deg, $primary, $primary-light);

阴影系统

根据元素重要性使用不同级别的阴影：

// 轻阴影 - 常规元素
box-shadow: 0 2px 8px rgba($primary, 0.1);

// 中阴影 - 重要元素
box-shadow: 0 4px 12px rgba($primary, 0.2);

// 重阴影 - 悬停状态
box-shadow: 0 6px 20px rgba($primary, 0.3);

动画效果

所有交互都有流畅的过渡：

transition: all 0.3s ease;

&:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba($primary, 0.25);
}

使用指南

在其他组件中使用平台映射

import { getPlatformName, getPlatformIcon, getPlatformColor } from '@/utils/platformMapper'

// 获取平台名称
const name = getPlatformName('douyin')  // '抖音'

// 获取平台图标
const icon = getPlatformIcon('xiaohongshu')  // '📕'

// 获取平台颜色
const color = getPlatformColor('wechat_video')
// {
//   gradient: 'linear-gradient(135deg, #07c160, #06ad56)',
//   color: '#07c160',
//   lightColor: 'rgba(7, 193, 96, 0.1)'
// }

// 格式化显示
import { formatPlatformDisplay } from '@/utils/platformMapper'
const display = formatPlatformDisplay('douyin')  // '📱 抖音'

后续优化建议

1. 动画增强

   • 添加打开抽屉时的滑入动画
   • 按钮点击时的波纹效果
   • 任务完成时的庆祝动画

2. 交互优化

   • 添加任务进度条
   • 支持任务评分
   • 添加任务笔记功能

3. 主题扩展

   • 支持暗色模式
   • 自定义主题色
   • 节日主题皮肤

4. 性能优化

   • 虚拟滚动（任务列表很长时）
   • 图片懒加载
   • 组件按需加载

测试清单

• [x] 平台名称正确显示（中文）
• [x] 平台图标正确显示
• [x] 渐变背景正常渲染
• [x] 悬停效果流畅
• [x] 按钮点击响应正常
• [x] 移动端适配良好
• [x] 颜色对比度符合无障碍标准
• [x] 动画性能良好

反馈

如有问题或建议，请联系开发团队。

---

更新时间：2025-12-13
版本：v2.0.0