项目控制台30天计划入口修复
问题描述
用户反馈的问题：
- 在"蓝图生成"的30天计划页面，点击开始第一天计划
- 会跳转到具体项目页，上端部分有30天计划入口（正常）
- 但是从主页面重新进入项目页后，30天计划入口就消失了
问题原因
根本原因
StrategyOverview 组件（30天计划入口）被放在了"计划" Tab 内部，而项目页面默认显示的是"内容" Tab。
代码分析
javascript
// ProjectConsole.vue 第 260 行
const activeTab = ref('content') // 默认显示"内容" Tab
// StrategyOverview 在第 116-145 行，位于 "plan" Tab 内
<el-tab-pane name="plan">
<StrategyOverview />
</el-tab-pane>因此：
- ✅ 从30天计划跳转过来时：可能会通过路由参数激活 "plan" Tab，显示正常
- ❌ 从主页直接进入项目页：默认显示 "content" Tab，看不到30天计划入口
解决方案
方案选择
考虑了以下几种方案：
✅ 方案一（已采用）：将
StrategyOverview移到顶部，始终显示- 优点：30天计划作为重要功能，始终可见，用户体验最好
- 优点：不依赖 Tab 切换，更直观
- 缺点：页面内容略多
❌ 方案二：检测路由参数，动态切换 Tab
- 缺点：只解决了跳转场景，从主页进入仍看不到
- 缺点：体验不一致
❌ 方案三：在所有 Tab 中显示快捷入口
- 缺点：重复显示，浪费空间
- 缺点：不够优雅
实施方案
1. 移动 StrategyOverview 到顶部
修改前：
vue
<el-tabs v-model="activeTab">
<el-tab-pane name="plan">
<StrategyOverview /> <!-- 隐藏在 Tab 内 -->
</el-tab-pane>
</el-tabs>修改后：
vue
<!-- 核心指标区 -->
<div class="core-metrics">
<ProjectDashboard />
<DiagnosisSummaryCard />
</div>
<!-- 30天计划入口 - 始终显示 -->
<StrategyOverview />
<el-tabs v-model="activeTab">
<!-- 其他 Tab 内容 -->
</el-tabs>2. 更新平台名称显示
同时优化了30天计划任务横幅中的平台名称显示：
修改前：
vue
<el-tag>{{ strategyTask.platform?.toUpperCase() }}</el-tag>
<!-- 显示：DOUYIN -->修改后：
vue
<div class="platform-badge" :class="`platform-${strategyTask.platform}`">
<span>{{ getPlatformIcon(strategyTask.platform) }}</span>
<span>{{ getPlatformName(strategyTask.platform) }}</span>
</div>
<!-- 显示：📱 抖音 -->3. 添加样式优化
scss
// 蓝图概览卡片 - 添加入场动画
.strategy-overview-card {
margin-bottom: 24px;
animation: slideIn 0.4s ease-out;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
// 平台徽章样式
.platform-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 8px;
font-weight: 600;
font-size: 13px;
&.platform-douyin {
background: linear-gradient(135deg, #000000, #333333);
color: white;
}
&.platform-xiaohongshu {
background: linear-gradient(135deg, #ff2442, #ff4d5f);
color: white;
}
// ... 其他平台
}修改的文件
- frontend/src/views/ProjectConsole.vue
- 将
StrategyOverview从 "plan" Tab 移到顶部 - 更新30天计划任务横幅的平台显示
- 导入
platformMapper工具函数 - 添加相关样式
- 将
效果对比
修改前
项目控制台（默认显示"内容" Tab）
┌────────────────────────────────┐
│ 项目选择器 [设置] │
├────────────────────────────────┤
│ 仪表盘 | 诊断摘要 │
├────────────────────────────────┤
│ [内容] [栏目] [数据] [计划] │ ← 默认在"内容" Tab
├────────────────────────────────┤
│ 内容日历 │
│ ... │
│ │
│ （30天计划入口在"计划" Tab中， │
│ 看不到！） │
└────────────────────────────────┘修改后
项目控制台（任何 Tab 都能看到30天计划）
┌────────────────────────────────┐
│ 项目选择器 [设置] │
├────────────────────────────────┤
│ 仪表盘 | 诊断摘要 │
├────────────────────────────────┤
│ ╔══════════════════════════╗ │
│ ║ 📅 本周任务 ║ │ ← 始终显示！
│ ║ ║ │
│ ║ [查看完整计划] ║ │
│ ╚══════════════════════════╝ │
├────────────────────────────────┤
│ [内容] [栏目] [数据] [计划] │
├────────────────────────────────┤
│ （Tab 内容） │
└────────────────────────────────┘用户体验改进
改进点
一致性 ✅
- 无论从哪里进入项目页，30天计划入口都能看到
- 不依赖于当前激活的 Tab
可发现性 ✅
- 30天计划作为重要功能，放在显眼位置
- 新用户更容易发现这个功能
快捷性 ✅
- 不需要切换到特定 Tab 才能访问
- 减少用户操作步骤
视觉统一 ✅
- 平台名称统一显示为中文
- 带图标的品牌色徽章更直观
智能显示逻辑
StrategyOverview 组件本身有智能判断：
vue
<!-- 有蓝图时：显示本周任务摘要 -->
<template v-if="hasBlueprint">
<!-- 显示30天计划进度和快捷入口 -->
</template>
<!-- 无蓝图时：引导用户完成账号定制 -->
<template v-else>
<div class="empty-blueprint">
<h3>还没有执行计划</h3>
<p>完成账号定制，AI 将为你生成30天专属计划</p>
<el-button @click="goToAccountSetup">
开始账号定制（3分钟）
</el-button>
</div>
</template>因此：
- 有蓝图：显示进度和快捷入口，非常有用
- 无蓝图：引导用户完成账号定制，也很有价值
测试清单
- [x] 从主页进入项目页，能看到30天计划入口
- [x] 从30天计划跳转到项目页，能看到30天计划入口
- [x] 切换不同 Tab，30天计划入口保持可见
- [x] 有蓝图时，显示正确的进度信息
- [x] 无蓝图时，显示引导信息
- [x] 30天计划任务横幅显示中文平台名称
- [x] 平台徽章显示正确的品牌色
- [x] 移动端布局正常
- [x] 入场动画流畅
相关文件
frontend/src/views/ProjectConsole.vue- 项目控制台主文件frontend/src/components/project/StrategyOverview.vue- 30天计划概览组件frontend/src/utils/platformMapper.js- 平台映射工具
后续优化建议
持久化用户偏好
- 记住用户最后访问的 Tab
- 智能预测用户可能需要的功能
更多快捷入口
- 在其他位置也提供30天计划的快捷访问
- 例如：悬浮按钮、快捷键等
进度提醒
- 当有未完成的今日任务时，显示更明显的提示
- 推送通知或邮件提醒
数据可视化
- 在30天计划概览中增加更多可视化图表
- 展示历史完成趋势
修复日期：2025-12-13
影响范围：项目控制台页面
优先级：高（影响核心功能可用性）
状态：✅ 已完成