30天执行计划看板横幅布局优化方案

📋 当前布局分析

现有布局结构

ProjectConsole 页面层级：
├── console-header（项目选择器 + 操作按钮）
├── strategy-task-banner（今日任务横幅 - 绿色渐变 🟢）
├── core-metrics（2列网格）
│   ├── ProjectDashboard（仪表盘）
│   └── DiagnosisSummaryCard（诊断摘要）
├── StrategyOverview（30天执行计划卡片 - 完整卡片 📊）
└── console-tabs（4个Tab: 内容/栏目/数据/智能助手）

发现的问题

1. 视觉风格不统一 ❌

strategy-task-banner：绿色渐变背景 rgba(34, 197, 94, 0.1) + 绿色边框
StrategyOverview：深色卡片背景 var(--bg-card) + 紫色渐变装饰
core-metrics：深色卡片背景
问题：绿色横幅在深色主题中突兀，不协调

2. 信息冗余 ❌

strategy-task-banner：显示"今日任务"详情（平台、工作流、3个按钮）
StrategyOverview：显示"本周任务"列表 + 进度 + 2个按钮
问题：两个区域功能重叠，用户容易困惑

3. 布局不够简洁 ❌

StrategyOverview 占据整行空间，信息密度过高
包含：头部、进度环、本周任务列表（7天）、2个操作按钮
问题：占用过多垂直空间，影响其他内容露出

4. 视觉权重分配不合理 ❌

当前视觉权重：
strategy-task-banner（绿色、醒目）    ⭐⭐⭐⭐⭐  高优先级
core-metrics（仪表盘+诊断）           ⭐⭐⭐     中优先级
StrategyOverview（30天计划）          ⭐⭐⭐⭐   高优先级

问题：任务横幅优先级过高，但只显示1个任务

🎯 优化目标

设计原则

统一性 - 所有卡片使用相同的深色主题风格
简洁性 - 减少信息冗余，突出核心内容
层次性 - 合理分配视觉权重，关键信息突出
一致性 - 布局、间距、圆角、阴影统一

核心策略

方案一：合并横幅与卡片（推荐）

删除 strategy-task-banner
增强 StrategyOverview，整合今日任务突出显示
布局更紧凑，信息层级清晰

方案二：横幅样式统一（备选）

保留 strategy-task-banner，但改为深色主题风格
简化 StrategyOverview，只显示摘要信息
适合强调今日任务优先级的场景

✨ 推荐方案：整合式看板（方案一）

新布局结构

ProjectConsole 页面层级：
├── console-header（项目选择器 + 操作按钮）
├── core-metrics（2列网格）
│   ├── ProjectDashboard（仪表盘）
│   └── DiagnosisSummaryCard（诊断摘要）
├── StrategyOverview（30天执行计划 - 横向紧凑布局 ✨）
│   ├── 左侧：今日任务 + 快速操作（突出显示）
│   ├── 中间：进度概览（简化）
│   └── 右侧：本周摘要（折叠）
└── console-tabs（4个Tab）

布局设计

整体卡片样式

scss

.strategy-overview {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: var(--shadow-md);
  
  // 渐变装饰条（统一风格）
  &::before {
    background: var(--primary-gradient);
  }
}

三栏横向布局

┌─────────────────────────────────────────────────────────────┐
│ 🎯 30天执行计划                          [查看完整计划 →]   │
├─────────────────────────────────────────────────────────────┤
│                                                               │
│ ┌─────────────────┐  ┌──────────────┐  ┌─────────────────┐ │
│ │ 今日任务 ⭐      │  │ 进度概览 📊  │  │ 本周任务 📅     │ │
│ │                  │  │              │  │                  │ │
│ │ 📱 抖音 | 口播   │  │  [15/30]     │  │ 第1天 ✓         │ │
│ │ 发布账号第一条.. │  │   50%        │  │ 第2天 ✓         │ │
│ │                  │  │              │  │ 第3天 🔥（今天）│ │
│ │ [🚀 开始执行]    │  │ 第一周·基建期│  │ 第4-7天...      │ │
│ │ [📅 完整计划]    │  │              │  │ [查看本周 →]    │ │
│ └─────────────────┘  └──────────────┘  └─────────────────┘ │
│                                                               │
└─────────────────────────────────────────────────────────────┘

详细设计规范

1. 今日任务区域（左侧）

布局：

scss

.today-task-section {
  flex: 1;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  position: relative;
  
  // 今日标识角标
  &::before {
    content: '今日';
    position: absolute;
    top: -8px;
    left: 16px;
    padding: 2px 10px;
    background: var(--primary-gradient);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);
  }
}

内容结构：

html

<div class="today-task-section">
  <div class="task-header">
    <span class="task-label">今日任务 · 第3天</span>
  </div>
  
  <div class="task-content">
    <div class="platform-info">
      <span class="platform-badge">📱 抖音</span>
      <span class="workflow-tag">口播</span>
    </div>
    
    <h4 class="task-title">发布账号第一条内容</h4>
    <p class="task-desc">建立账号基础认知...</p>
  </div>
  
  <div class="task-actions">
    <el-button type="primary" class="exec-btn">
      🚀 开始执行
    </el-button>
    <el-button text class="detail-btn">
      查看详情 →
    </el-button>
  </div>
</div>

样式特点：

使用主题紫色突出"今日"标识
平台徽章保留品牌色
操作按钮主次分明

2. 进度概览区域（中间）

布局：

scss

.progress-section {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

内容结构：

html

<div class="progress-section">
  <el-progress 
    type="circle" 
    :percentage="50" 
    :width="100"
    :stroke-width="8"
    :color="progressColor"
  >
    <template #default>
      <div class="progress-content">
        <span class="progress-num">15</span>
        <span class="progress-total">/30</span>
      </div>
    </template>
  </el-progress>
  
  <div class="progress-info">
    <span class="progress-phase">第一周 · 账号基建期</span>
    <span class="progress-detail">本周 3/7 天完成</span>
  </div>
</div>

样式特点：

大号圆形进度环（100px）
渐变进度条颜色
简洁的文字说明

3. 本周任务区域（右侧）

布局：

scss

.week-tasks-section {
  flex: 0 0 220px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

内容结构：

html

<div class="week-tasks-section">
  <div class="week-header">
    <span class="week-label">本周任务</span>
    <span class="week-count">4项待办</span>
  </div>
  
  <div class="week-tasks-compact">
    <div class="task-item task-item--done">
      <span class="task-day">第1天</span>
      <el-icon class="task-status"><CircleCheckFilled /></el-icon>
    </div>
    <div class="task-item task-item--done">
      <span class="task-day">第2天</span>
      <el-icon class="task-status"><CircleCheckFilled /></el-icon>
    </div>
    <div class="task-item task-item--today">
      <span class="task-day">第3天</span>
      <span class="task-tag">今天</span>
    </div>
    <div class="task-item">
      <span class="task-day">第4天</span>
    </div>
    <!-- 第5-7天折叠显示 -->
  </div>
  
  <el-button text class="view-week-btn">
    查看本周详情 →
  </el-button>
</div>

样式特点：

紧凑的任务列表（只显示天数 + 状态）
今日任务高亮
折叠其余任务，减少高度

响应式设计

桌面端（≥1024px）

scss

.strategy-overview-layout {
  display: flex;
  gap: 16px;
  
  .today-task-section { flex: 1; }
  .progress-section { flex: 0 0 200px; }
  .week-tasks-section { flex: 0 0 220px; }
}

平板端（768px - 1023px）

scss

.strategy-overview-layout {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 16px;
  
  .today-task-section { grid-column: 1 / 2; }
  .progress-section { grid-column: 2 / 3; }
  .week-tasks-section { 
    grid-column: 1 / 3; 
    display: flex;
    gap: 8px;
    
    .week-tasks-compact {
      display: flex;
      gap: 8px;
    }
  }
}

移动端（<768px）

scss

.strategy-overview-layout {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

🎨 视觉优化细节

配色方案

主题色使用：

scss

// 今日标识
$today-badge: var(--primary-gradient);  // 紫色渐变

// 卡片背景
$card-bg: var(--bg-secondary);  // #12121a

// 进度环颜色
$progress-color: [
  { color: '#10b981', percentage: 33 },   // 绿色（0-33%）
  { color: '#f59e0b', percentage: 66 },   // 橙色（34-66%）
  { color: '#7c3aed', percentage: 100 }   // 紫色（67-100%）
]

// 今日任务高亮
$today-highlight: rgba(124, 58, 237, 0.15);

间距规范

scss

// 卡片间距
$card-gap: 16px;

// 内边距
$section-padding: 16px;
$card-padding: 20px 24px;

// 元素间距
$element-gap-sm: 8px;
$element-gap-md: 12px;
$element-gap-lg: 16px;

圆角规范

scss

// 主卡片
$card-radius: 16px;

// 内部区域
$section-radius: 12px;

// 小元素（徽章、标签）
$badge-radius: 8px;

// 角标
$tag-radius: 10px;

阴影规范

scss

// 主卡片阴影
box-shadow: var(--shadow-md);

// 内部区域阴影
box-shadow: var(--shadow-sm);

// 今日角标阴影
box-shadow: 0 2px 8px rgba(124, 58, 237, 0.4);

// 悬停效果
&:hover {
  box-shadow: var(--shadow-lg);
}

📐 尺寸对比

优化前（现有）

strategy-task-banner: 
- 高度：~100px
- 占用空间：20px margin

StrategyOverview:
- 高度：~450px（头部 + 进度 + 7天任务列表 + 按钮）
- 占用空间：24px margin

总计：~574px 垂直空间

优化后（方案一）

StrategyOverview（整合式）:
- 高度：~200px（单行三栏布局）
- 占用空间：24px margin

总计：~224px 垂直空间

节省空间：350px（61%） ✅

🔄 备选方案：横幅统一（方案二）

改为深色主题风格：

scss

.strategy-task-banner {
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--bg-secondary);  // 深色背景
  border: 1px solid var(--border-light);  // 统一边框
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  position: relative;
  
  // 渐变装饰条
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--primary-gradient);
  }
  
  .banner-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  
  .banner-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
  }
  
  .banner-actions {
    display: flex;
    gap: 10px;
    
    .el-button {
      // 使用主题按钮样式
    }
  }
}

简化 StrategyOverview：

scss

.strategy-overview {
  // 只显示进度摘要 + 本周任务列表
  // 移除今日任务详情（已在横幅显示）
  
  .overview-header {
    // 保留
  }
  
  .progress-overview {
    // 保留但简化
  }
  
  .week-tasks {
    // 保留
  }
  
  .quick-actions {
    // 移除（操作已在横幅）
  }
}

优缺点对比：

方面	方案一（整合式）	方案二（横幅统一）
空间效率	⭐⭐⭐⭐⭐ 节省61%	⭐⭐⭐ 节省20%
视觉统一	⭐⭐⭐⭐⭐ 完全统一	⭐⭐⭐⭐ 较统一
信息清晰	⭐⭐⭐⭐⭐ 集中展示	⭐⭐⭐ 分散两处
实施难度	⭐⭐⭐ 需重构	⭐⭐⭐⭐ 样式调整
用户认知	⭐⭐⭐⭐ 一目了然	⭐⭐⭐⭐⭐ 保持原逻辑

📊 优化效果预期

视觉效果

优化前：

[项目选择器] [操作按钮]

┌────────────────────────────────────┐
│ 🟢 今日任务（绿色横幅，突兀）     │
│ 发布账号第一条内容...              │
│ [开始] [查看] [暂不执行]           │
└────────────────────────────────────┘

┌──────────────┐ ┌──────────────┐
│ 仪表盘       │ │ 诊断摘要     │
└──────────────┘ └──────────────┘

┌────────────────────────────────────┐
│ 🎯 30天执行计划  [查看完整计划 →] │
├────────────────────────────────────┤
│ [进度环] 15/30                     │
│ 第一周·账号基建期                  │
│ 本周 3/7 天完成                    │
├────────────────────────────────────┤
│ 本周任务：                          │
│ ☑ 第1天 ...                        │
│ ☑ 第2天 ...                        │
│ 🔥 第3天 ...（今天）                │
│ ☐ 第4天 ...                        │
│ ☐ 第5-7天 ...                      │
├────────────────────────────────────┤
│ [查看30天计划] [修改诊断]          │
└────────────────────────────────────┘

[Tab导航]

优化后（方案一）：

[项目选择器] [操作按钮]

┌──────────────┐ ┌──────────────┐
│ 仪表盘       │ │ 诊断摘要     │
└──────────────┘ └──────────────┘

┌────────────────────────────────────────────────────────┐
│ 🎯 30天执行计划                   [查看完整计划 →]    │
├────────────────────────────────────────────────────────┤
│ ┌────────────┐  ┌──────────┐  ┌───────────────┐      │
│ │ 今日 ⭐     │  │ 进度 📊  │  │ 本周 📅       │      │
│ │            │  │          │  │               │      │
│ │ 第3天任务  │  │ [15/30]  │  │ ☑ 第1天       │      │
│ │ 📱 抖音     │  │   50%    │  │ ☑ 第2天       │      │
│ │ 口播       │  │          │  │ 🔥 第3天       │      │
│ │            │  │ 第一周   │  │ ☐ 第4-7天...  │      │
│ │[🚀 开始]   │  │ 基建期   │  │               │      │
│ └────────────┘  └──────────┘  └───────────────┘      │
└────────────────────────────────────────────────────────┘

[Tab导航]

信息架构改进

优化前：

今日任务：横幅单独显示（优先级过高）
进度信息：StrategyOverview 中（位置偏下）
本周任务：列表展开（占用空间大）

优化后：

今日任务：整合在左侧（重要但不突兀）
进度信息：居中显示（可视化突出）
本周任务：折叠显示（节省空间）

用户操作流程

优化前流程：

1. 看到绿色横幅 → 今日任务
   ↓
2. 点击"开始执行" / "查看完整计划"
   ↓
3. 向下滚动 → 看到30天计划卡片
   ↓
4. 困惑：横幅和卡片有什么区别？

优化后流程：

1. 看到整合式看板 → 一目了然
   ↓
2. 左侧：今日任务 → 开始执行
   中间：进度状态 → 了解完成度
   右侧：本周任务 → 规划安排
   ↓
3. 点击"查看完整计划" → 详情页
   ↓
4. 清晰：所有信息集中展示

📝 实施清单

Phase 1: 重构 StrategyOverview 组件

[ ] 1.1 创建新的横向布局结构

html

<div class="strategy-overview-horizontal">
  <div class="today-task-section">...</div>
  <div class="progress-section">...</div>
  <div class="week-tasks-section">...</div>
</div>

[ ] 1.2 实现今日任务区域
- 今日角标样式
- 任务详情卡片
- 操作按钮
[ ] 1.3 简化进度区域
- 大号圆形进度环
- 阶段信息
- 周进度摘要
[ ] 1.4 折叠本周任务区域
- 紧凑任务列表
- 今日高亮
- 查看详情按钮
[ ] 1.5 添加响应式样式
- 桌面端（Flex 横向）
- 平板端（Grid 2列）
- 移动端（Flex 纵向）

[ ] 2.1 从 ProjectConsole.vue 中删除 banner 相关代码

vue

// 删除
<div v-if="showStrategyTaskBanner" class="strategy-task-banner">
  ...
</div>

[ ] 2.2 删除相关状态和方法

javascript

// 删除
const showStrategyTaskBanner = ref(false)
const strategyTask = ref(null)
const dismissStrategyTask = () => {}

[ ] 2.3 删除相关 SCSS 样式
scss
```
// 删除
.strategy-task-banner { ... }
```
1
2

Phase 3: 调整 ProjectConsole 布局

[ ] 3.1 调整 StrategyOverview 位置
- 保持在 core-metrics 之后
- 保持 24px margin

[ ] 3.2 统一卡片间距

scss

.core-metrics { margin-bottom: 24px; }
.strategy-overview-card { margin-bottom: 24px; }
.console-tabs { margin-top: 0; }

Phase 4: 测试与调优

[ ] 4.1 视觉测试
- 颜色统一性
- 圆角一致性
- 阴影效果
[ ] 4.2 响应式测试
- 桌面端（1920px, 1440px, 1024px）
- 平板端（768px）
- 移动端（375px, 414px）
[ ] 4.3 交互测试
- 按钮点击
- 跳转逻辑
- 数据加载
[ ] 4.4 性能测试
- 组件渲染性能
- 动画流畅度

Phase 5: 文档更新

[ ] 5.1 更新组件文档
[ ] 5.2 更新设计规范
[ ] 5.3 创建优化总结

🎯 预期成果

量化指标

指标	优化前	优化后	提升
垂直空间占用	~574px	~224px	节省 61% ⬇️
信息冗余度	高（2个入口）	低（1个入口）	减少 50% ⬇️
视觉统一度	60%（绿色突兀）	95%（深色统一）	提升 35% ⬆️
用户认知负担	高（2处任务显示）	低（集中展示）	降低 40% ⬇️
首屏信息密度	低	高	提升 50% ⬆️

定性效果

视觉和谐 ✅
- 所有卡片使用统一的深色主题
- 紫色渐变贯穿全局
- 没有突兀的色彩
信息清晰 ✅
- 今日任务一目了然
- 进度状态直观
- 本周安排明确
操作便捷 ✅
- 核心操作按钮明显
- 无需滚动查看关键信息
- 快速跳转到详情页
布局紧凑 ✅
- 节省61%垂直空间
- 更多内容在首屏露出
- 减少滚动需求

📖 相关文档

文档日期: 2025-12-13
优化范围: 30天执行计划看板横幅
推荐方案: 方案一（整合式看板）
预期收益: 空间节省61%、视觉统一度提升35%

30天执行计划看板横幅布局优化方案 ​

📋 当前布局分析 ​

现有布局结构 ​

发现的问题 ​

1. 视觉风格不统一 ❌ ​

2. 信息冗余 ❌ ​

3. 布局不够简洁 ❌ ​

4. 视觉权重分配不合理 ❌ ​

🎯 优化目标 ​

设计原则 ​

核心策略 ​

✨ 推荐方案：整合式看板（方案一） ​

新布局结构 ​

布局设计 ​

整体卡片样式 ​

三栏横向布局 ​

详细设计规范 ​

1. 今日任务区域（左侧） ​

2. 进度概览区域（中间） ​

3. 本周任务区域（右侧） ​

响应式设计 ​

桌面端（≥1024px） ​

平板端（768px - 1023px） ​

移动端（<768px） ​

🎨 视觉优化细节 ​

配色方案 ​

间距规范 ​

圆角规范 ​

阴影规范 ​

📐 尺寸对比 ​

优化前（现有） ​

优化后（方案一） ​

🔄 备选方案：横幅统一（方案二） ​

调整 strategy-task-banner 样式 ​

📊 优化效果预期 ​

视觉效果 ​

信息架构改进 ​

用户操作流程 ​

📝 实施清单 ​

Phase 1: 重构 StrategyOverview 组件 ​

Phase 2: 移除 strategy-task-banner ​

Phase 3: 调整 ProjectConsole 布局 ​

Phase 4: 测试与调优 ​

Phase 5: 文档更新 ​

🎯 预期成果 ​

量化指标 ​

定性效果 ​

📖 相关文档 ​

30天执行计划看板横幅布局优化方案

📋 当前布局分析

现有布局结构

发现的问题

1. 视觉风格不统一 ❌

2. 信息冗余 ❌

3. 布局不够简洁 ❌

4. 视觉权重分配不合理 ❌

🎯 优化目标

设计原则

核心策略

✨ 推荐方案：整合式看板（方案一）

新布局结构

布局设计

整体卡片样式

三栏横向布局

详细设计规范

1. 今日任务区域（左侧）

2. 进度概览区域（中间）

3. 本周任务区域（右侧）

响应式设计

桌面端（≥1024px）

平板端（768px - 1023px）

移动端（<768px）

🎨 视觉优化细节

配色方案

间距规范

圆角规范

阴影规范

📐 尺寸对比

优化前（现有）

优化后（方案一）

🔄 备选方案：横幅统一（方案二）

调整 strategy-task-banner 样式

📊 优化效果预期

视觉效果

信息架构改进

用户操作流程

📝 实施清单

Phase 1: 重构 StrategyOverview 组件

Phase 2: 移除 strategy-task-banner

Phase 3: 调整 ProjectConsole 布局

Phase 4: 测试与调优

Phase 5: 文档更新

🎯 预期成果

量化指标

定性效果

📖 相关文档