一刻工坊

外观

项目页面"计划"入口优化 ​

优化目标 ​

解决项目页面中两个"计划"入口的语义冲突，优化用户体验和视觉呈现。

问题分析 ​

优化前的问题 ​

两个"计划"概念混淆：

  1. 顶部的30天计划入口 - 指"执行计划"，"今天/本周要做什么"
  2. Tab中的"计划" - 指"AI配置"，包含"AI上下文感知"和"自动化调度"

用户困惑点：

  • ❌ 两处都叫"计划"，但含义完全不同
  • ❌ 层级不清晰：一个是执行层面，一个是配置层面
  • ❌ 容易误解：用户可能找错入口

优化方案 ​

方案选择：重新命名 + 视觉优化 ​

采用方案1选项A：将 Tab 中的"计划"重命名为"智能助手"，并进行视觉优化。

优化内容 ​

1. Tab 重命名（核心优化）✨ ​

修改点：

  • Tab 名称：计划 → 智能助手
  • Tab 图标：Calendar → MagicStick 🪄
  • Tab 内部名称：plan → assistant

效果：

优化前: [内容] [栏目] [数据] [计划] 📅
优化后: [内容] [栏目] [数据] [智能助手] 🪄

理由：

  • ✅ 与"30天计划"明确区分
  • ✅ 突出AI辅助的定位
  • ✅ 用户容易理解这是配置AI的地方
  • ✅ 为未来扩展更多AI功能预留空间

2. 添加引导文案 ​

新增内容： 在"智能助手" Tab 顶部添加引导说明：

🤖 配置 AI 如何理解你的项目，让内容创作更智能

样式特点：

  • 浅紫色渐变背景
  • 柔和的边框
  • 清晰的说明文字

3. 优化30天计划卡片标题 ​

标题优化：

优化前: 📅 本周任务
优化后: 🎯 30天执行计划

副标题优化：

优化前: 你的30天计划执行进度
优化后: 本周任务 · 第X天

设计理念：

  • 🎯 emoji 更强调"目标"和"行动"
  • 标题更明确，直接点出"30天执行计划"
  • 副标题更简洁，显示关键信息（本周任务 + 当前天数）
  • 标题文字使用渐变色，更加醒目

4. 统一按钮主题风格 ​

按钮样式升级：

主要按钮（查看30天计划）：

scss
// 主题渐变色
background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);

// Hover 效果
&:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.4);
}

次要按钮（修改诊断）：

scss
// 边框样式
background: transparent;
border: 1px solid rgba(124, 58, 237, 0.3);
color: #7c3aed;

// Hover 效果
&:hover {
  background: rgba(124, 58, 237, 0.08);
  border-color: #7c3aed;
  transform: translateY(-1px);
}

效果对比：

优化前: 普通 Element Plus 默认按钮
优化后: 
  - 主按钮：紫色渐变 + 阴影 + 悬停动画
  - 次按钮：紫色边框 + 半透明悬停背景
  - 统一的主题色系

5. 增强30天计划卡片视觉效果 ​

卡片样式优化：

scss
// 渐变背景
background: linear-gradient(135deg, 
  rgba(124, 58, 237, 0.03) 0%, 
  rgba(255, 255, 255, 1) 50%, 
  rgba(59, 130, 246, 0.03) 100%
);

// 边框和阴影
border: 2px solid rgba(124, 58, 237, 0.15);
box-shadow: 0 4px 16px rgba(124, 58, 237, 0.08);

// 顶部装饰条
&::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #7c3aed 0%, #8b5cf6 50%, #3b82f6 100%);
}

视觉特点：

  • 🎨 柔和的渐变背景，不抢眼但有质感
  • 📐 更粗的边框，提升层级感
  • ✨ 顶部彩色装饰条，品牌特色
  • 🌈 整体紫蓝色调，与主题一致

修改的文件 ​

1. frontend/src/views/ProjectConsole.vue ​

变更内容：

  • Tab 名称和图标修改
  • 添加 MagicStick 图标导入
  • 新增引导文案组件
  • 添加引导文案样式

代码变更：

vue
<!-- 修改前 -->
<el-tab-pane name="plan">
  <template #label>
    <el-icon><Calendar /></el-icon>
    计划
  </template>
  <div class="tab-content plan-tab-content">
    <ProjectContextCard />
    <ProjectAutomationCard />
  </div>
</el-tab-pane>

<!-- 修改后 -->
<el-tab-pane name="assistant">
  <template #label>
    <el-icon><MagicStick /></el-icon>
    智能助手
  </template>
  <div class="tab-content plan-tab-content">
    <!-- 引导说明 -->
    <div class="tab-guide">
      <span class="guide-icon">🤖</span>
      <span class="guide-text">配置 AI 如何理解你的项目，让内容创作更智能</span>
    </div>
    <ProjectContextCard />
    <ProjectAutomationCard />
  </div>
</el-tab-pane>

2. frontend/src/components/project/StrategyOverview.vue ​

变更内容：

  • 卡片整体样式优化（渐变背景、边框、装饰条）
  • 标题和副标题文案优化
  • 图标从 Calendar 改为 emoji 🎯
  • 标题文字添加渐变色效果
  • 按钮样式统一为主题渐变风格
  • 添加按钮悬停动画效果

关键样式变更：

scss
// 卡片样式
.strategy-overview {
  // 添加渐变背景、边框、阴影、装饰条
}

// 标题样式
.overview-header .header-left h3 {
  // 添加渐变文字效果
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

// 按钮样式
.action-btn--primary {
  // 主题渐变 + 阴影 + 悬停动画
}

.action-btn--secondary {
  // 边框样式 + 半透明悬停
}

视觉效果对比 ​

优化前 ​

┌─────────────────────────────────────┐
│ 项目控制台                          │
├─────────────────────────────────────┤
│ 仪表盘          诊断摘要            │
├─────────────────────────────────────┤
│ ┌─────────────────────────────────┐ │
│ │ 📅 本周任务                     │ │ ← 普通卡片
│ │ 你的30天计划执行进度            │ │
│ │ [查看完整计划]                  │ │ ← 普通按钮
│ └─────────────────────────────────┘ │
├─────────────────────────────────────┤
│ [内容] [栏目] [数据] [📅 计划]      │ ← 语义混淆
│                       ↓             │
│    - AI上下文感知                   │
│    - 自动化调度                     │
└─────────────────────────────────────┘

优化后 ​

┌─────────────────────────────────────┐
│ 项目控制台                          │
├─────────────────────────────────────┤
│ 仪表盘          诊断摘要            │
├─────────────────────────────────────┤
│ ╔═════════════════════════════════╗ │ ← 顶部彩色装饰条
│ ║ 🎯 30天执行计划                 ║ │ ← 渐变边框
│ ║ 本周任务 · 第X天                ║ │ ← 渐变背景
│ ║ [查看30天计划 →]                ║ │ ← 渐变按钮
│ ╚═════════════════════════════════╝ │
├─────────────────────────────────────┤
│ [内容] [栏目] [数据] [🪄 智能助手]  │ ← 语义清晰
│                       ↓             │
│    🤖 配置AI如何理解你的项目...     │ ← 引导文案
│    - AI上下文感知                   │
│    - 自动化调度                     │
└─────────────────────────────────────┘

用户体验改进 ​

语义层面 ​

优化前优化后改进点
两个"计划"混淆30天计划 + 智能助手✅ 语义明确，不冲突
层级不清执行 + 配置✅ 定位清晰
用户困惑直观理解✅ 降低认知负担

视觉层面 ​

方面优化前优化后
30天计划卡片普通白色卡片渐变背景 + 彩色边框 + 装饰条
标题样式纯黑文字渐变色文字 + emoji
按钮样式Element Plus 默认主题渐变 + 阴影 + 动画
智能助手Tab无说明引导文案 + 渐变背景
整体一致性分散统一的紫蓝色主题

功能定位 ​

30天执行计划：

  • 定位：执行层面 - "我要做什么"
  • 特点：醒目、突出、行动导向
  • 用户感知：这是我的任务中心

智能助手：

  • 定位：配置层面 - "AI如何帮我"
  • 特点：辅助、配置、智能化
  • 用户感知：这是AI的设置中心

技术细节 ​

CSS 渐变实现 ​

文字渐变：

scss
h3 {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

按钮渐变：

scss
.action-btn--primary {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
  
  &:hover {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
  }
}

卡片背景渐变：

scss
.strategy-overview {
  background: linear-gradient(135deg, 
    rgba(124, 58, 237, 0.03) 0%,  // 浅紫色
    rgba(255, 255, 255, 1) 50%,    // 白色
    rgba(59, 130, 246, 0.03) 100%  // 浅蓝色
  );
}

动画效果 ​

按钮悬停：

scss
transition: all 0.3s ease;

&:hover {
  transform: translateY(-2px);      // 上移2px
  box-shadow: 0 6px 16px rgba(...); // 阴影加深
}

&:active {
  transform: translateY(0);         // 点击回弹
}

响应式设计 ​

所有样式均保持响应式兼容：

  • 移动端自动适配
  • 小屏幕下按钮保持可用性
  • 文字大小合理缩放

设计原则 ​

1. 视觉层级 ​

最重要: 30天执行计划（顶部 + 渐变装饰）
  ↓
次要: 核心指标区（仪表盘 + 诊断）
  ↓
常用: 内容/栏目/数据 Tab
  ↓
配置: 智能助手 Tab

2. 色彩系统 ​

主色调：紫色系（#7c3aed - #8b5cf6）

  • 代表智能、创新、专业
  • 与AI特性匹配
  • 品牌识别度高

辅助色：蓝色系（#3b82f6）

  • 用于渐变过渡
  • 增加视觉丰富度

使用场景：

  • 标题渐变：紫色主调
  • 按钮：紫色渐变
  • 卡片边框：半透明紫色
  • 卡片背景：极浅紫-白-极浅蓝渐变
  • 装饰条：紫-紫-蓝渐变

3. 交互反馈 ​

所有可点击元素：

  • ✅ 悬停变化（颜色、阴影、位移）
  • ✅ 点击反馈（回弹动画）
  • ✅ 平滑过渡（0.3s ease）

视觉引导：

  • 🎯 emoji 增强语义
  • 📝 引导文案降低理解成本
  • 🎨 渐变突出重点

未来扩展 ​

智能助手功能扩展 ​

当前智能助手包含：

  • AI上下文感知
  • 自动化调度

未来可扩展：

  • 🤖 AI创作偏好设置
  • 📊 智能数据分析配置
  • 🔔 智能提醒设置
  • 🎨 AI风格训练
  • 📝 AI写作模板管理

30天计划功能扩展 ​

  • 📅 日历视图
  • 📈 进度图表可视化
  • 🏆 成就系统
  • 📱 移动端快捷操作
  • 🔔 任务提醒

测试清单 ​

  • [x] Tab 名称正确显示为"智能助手"
  • [x] Tab 图标显示为 🪄
  • [x] 引导文案正确显示
  • [x] 30天计划标题显示为"🎯 30天执行计划"
  • [x] 副标题动态显示当前天数
  • [x] 主按钮使用渐变样式
  • [x] 次按钮使用边框样式
  • [x] 按钮悬停动画正常
  • [x] 卡片渐变背景正常
  • [x] 顶部装饰条显示
  • [x] 移动端布局正常

相关文档 ​

优化日期: 2025-12-13
优化版本: v2.0
设计师: AI Assistant
文档版本: 1.0
状态: ✅ 已完成

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

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