ljwx-stock/DASHBOARD_V2_UPGRADE_GUIDE.md

Dashboard V2 升级指南

📊 现状总结

✅ 已完成的后端 API

策略管理 API (/api/strategies/*)

• GET /api/strategies/list - 获取策略列表（支持筛选）
• GET /api/strategies/{id}/detail - 获取策略详情（含回测数据）
• GET /api/strategies/recommended - 基于风险环境推荐策略

风险雷达 API (/api/risk/*)

• GET /api/risk/overview - 风险概览（综合指数+四维指标）
• GET /api/risk/events - 风险事件列表（支持筛选）
• GET /api/risk/timeline?days=7 - 风险时间线/日历
• GET /api/risk/strategy-impact - 策略风险影响分析

✅ 已完成的前端组件

• StrategyCard.vue - 策略卡片
• StrategyDetailDrawer.vue - 策略详情抽屉
• RiskEventCard.vue - 风险事件卡片
• RiskRadarGauge.vue - 风险雷达仪表盘
• RiskTimeline.vue - 风险时间线

---

🚀 第一步：更新 DashboardV2.vue（主题&策略区）

1.1 导入新组件

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import HeroSection from '@/components/HeroSectionEnhanced.vue'
import MarketPulse from '@/components/MarketPulseEnhanced.vue'
import StockCard from '@/components/StockCard.vue'
import StrategyCard from '@/components/StrategyCard.vue'
import StrategyDetailDrawer from '@/components/StrategyDetailDrawer.vue'
import RiskRadarGauge from '@/components/RiskRadarGauge.vue'
import RiskEventCard from '@/components/RiskEventCard.vue'
import RiskTimeline from '@/components/RiskTimeline.vue'
import AIDock from '@/components/AIDock.vue'
import { 
  fetchRecommendations, 
  fetchAIMarketOverview, 
  fetchAIRecommendations,
  fetchStrategiesList,
  fetchStrategyDetail,
  fetchRiskOverview,
  fetchRiskEvents,
  fetchRiskTimeline
} from '@/services/api'

// State
const loading = ref(false)
const error = ref(null)
const sortBy = ref('score')
const selectedStock = ref(null)

// 策略相关状态
const strategiesLoading = ref(false)
const strategies = ref([])
const selectedStrategy = ref(null)
const strategyDrawerOpen = ref(false)
const strategyFilters = ref({
  style: null,     // comprehensive, value, momentum, defensive
  period: null,    // short, mid, mid_long, long
  risk_level: null // low, medium, high
})

// 风险相关状态
const riskLoading = ref(false)
const riskData = ref({
  overall_risk_score: 0,
  risk_level: 'medium',
  dimensions: {}
})
const riskEvents = ref([])
const riskTimeline = ref([])
</script>

1.2 替换主题&策略区的模板

原来的代码：

<!-- Themes/Strategies Section -->
<section class="themes">
  <h2 class="section-title">主题 & 策略</h2>
  <div class="themes__tabs">...</div>
  <div class="themes__description">...</div>
  <div class="themes__grid">...</div>
</section>

升级为：

<!-- Themes/Strategies Section -->
<section class="strategies-section">
  <div class="strategies-header">
    <h2 class="section-title">主题 & 策略</h2>
    <div class="strategies-filters">
      <!-- 策略筛选 -->
      <select v-model="strategyFilters.style" @change="loadStrategies">
        <option :value="null">全部风格</option>
        <option value="comprehensive">AI综合</option>
        <option value="value">低估精选</option>
        <option value="momentum">动量趋势</option>
        <option value="defensive">稳健防守</option>
      </select>
      
      <select v-model="strategyFilters.period" @change="loadStrategies">
        <option :value="null">全部周期</option>
        <option value="short">短线</option>
        <option value="mid">波段</option>
        <option value="mid_long">中长线</option>
        <option value="long">长线</option>
      </select>
      
      <select v-model="strategyFilters.risk_level" @change="loadStrategies">
        <option :value="null">全部风险</option>
        <option value="low">低风险</option>
        <option value="medium">中风险</option>
        <option value="high">高风险</option>
      </select>
    </div>
  </div>

  <!-- Loading State -->
  <div v-if="strategiesLoading" class="strategies-loading">
    <div class="spinner"></div>
    <span>加载策略中...</span>
  </div>

  <!-- 策略卡片栅格 (2列布局) -->
  <div v-else class="strategies-grid">
    <StrategyCard
      v-for="strategy in strategies"
      :key="strategy.id"
      :strategy="strategy"
      @viewDetail="handleViewStrategyDetail"
      @applyStrategy="handleApplyStrategy"
    />
  </div>

  <!-- 空状态 -->
  <div v-if="!strategiesLoading && strategies.length === 0" class="strategies-empty">
    <span class="empty-icon">📊</span>
    <p>暂无符合条件的策略</p>
  </div>
</section>

<!-- 策略详情抽屉 -->
<StrategyDetailDrawer
  :is-open="strategyDrawerOpen"
  :strategy="selectedStrategy"
  :loading="false"
  @close="strategyDrawerOpen = false"
/>

1.3 添加方法和生命周期

<script setup>
// ... 前面的导入和状态定义

// 加载策略列表
const loadStrategies = async () => {
  strategiesLoading.value = true
  
  try {
    const data = await fetchStrategiesList(strategyFilters.value)
    strategies.value = data.strategies || []
  } catch (err) {
    console.error('Load strategies error:', err)
    error.value = '获取策略失败: ' + err.message
  } finally {
    strategiesLoading.value = false
  }
}

// 查看策略详情
const handleViewStrategyDetail = async (strategy) => {
  try {
    const detail = await fetchStrategyDetail(strategy.id)
    selectedStrategy.value = detail
    strategyDrawerOpen.value = true
  } catch (err) {
    console.error('Load strategy detail error:', err)
    error.value = '获取策略详情失败'
  }
}

// 应用策略
const handleApplyStrategy = (strategy) => {
  // 将策略应用到「今日推荐」区域
  console.log('Applying strategy:', strategy)
  
  // TODO: 调用策略推荐API，更新 dashboardData.picks
  // 示例：
  // const recs = await fetchStrategyRecommendations(strategy.id)
  // dashboardData.value.picks = recs
  
  // 显示提示
  alert(`已应用策略: ${strategy.name}`)
}

// 生命周期
onMounted(() => {
  handleRefresh()
  loadStrategies()  // 加载策略
  loadRiskData()    // 加载风险数据（下一步）
})
</script>

1.4 添加样式

<style scoped>
/* 策略区域 */
.strategies-section {
  padding: 0 24px;
  margin-bottom: 48px;
}

.strategies-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.strategies-filters {
  display: flex;
  gap: 12px;
}

.strategies-filters select {
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition);
}

.strategies-filters select:hover {
  border-color: var(--pri);
}

.strategies-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 60px 20px;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--border);
  border-top-color: var(--pri);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 策略卡片栅格 (2列) */
.strategies-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.strategies-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.strategies-empty .empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
}

.strategies-empty p {
  color: var(--text-muted);
  font-size: 14px;
  margin: 0;
}

@media (max-width: 1024px) {
  .strategies-grid {
    grid-template-columns: 1fr;
  }
}
</style>

---

🚨 第二步：更新风险雷达区

2.1 替换风险雷达区的模板

原来的代码：

<!-- Risk Radar Section -->
<section class="risk-radar">
  <h2 class="section-title">风险雷达</h2>
  <div class="risk-cards">...</div>
</section>

升级为：

<!-- Risk Radar Section -->
<section class="risk-radar-section">
  <h2 class="section-title">风险雷达</h2>
  
  <!-- 1. 顶部风险指数仪表盘 -->
  <RiskRadarGauge :risk-data="riskData" />
  
  <!-- 2. 风险事件列表 -->
  <div class="risk-events">
    <div class="risk-events__header">
      <h3 class="subsection-title">当前风险事件</h3>
      <div class="risk-events__filters">
        <button
          v-for="level in ['low', 'medium', 'high']"
          :key="level"
          class="filter-btn"
          :class="{ active: riskEventFilter === level }"
          @click="filterRiskEvents(level)"
        >
          {{ getRiskLevelLabel(level) }}
        </button>
      </div>
    </div>
    
    <div v-if="riskLoading" class="loading-small">
      <div class="spinner-small"></div>
    </div>
    
    <div v-else class="risk-events__list">
      <RiskEventCard
        v-for="event in filteredRiskEvents"
        :key="event.id"
        :event="event"
        @analyzeDetail="handleAnalyzeRiskDetail"
      />
    </div>
  </div>
  
  <!-- 3. 风险时间线 -->
  <div class="risk-timeline-wrapper">
    <RiskTimeline :days="7" @eventClick="handleRiskTimelineEventClick" />
  </div>
  
  <!-- 4. 风险与策略联动提示 -->
  <div v-if="recommendedStrategiesForRisk.length > 0" class="risk-strategy-link">
    <h4 class="link-title">
      <span class="link-icon">💡</span>
      在当前风险环境下，AI 建议优先考虑以下策略：
    </h4>
    <div class="link-strategies">
      <button
        v-for="strategy in recommendedStrategiesForRisk"
        :key="strategy.id"
        class="strategy-tag"
        @click="handleViewStrategyDetail(strategy)"
      >
        【{{ strategy.name }}】
      </button>
    </div>
  </div>
</section>

2.2 添加风险相关方法

<script setup>
// ... 前面的状态

const riskEventFilter = ref(null)
const recommendedStrategiesForRisk = ref([])

// 计算属性：过滤后的风险事件
const filteredRiskEvents = computed(() => {
  if (!riskEventFilter.value) return riskEvents.value
  return riskEvents.value.filter(e => e.level === riskEventFilter.value)
})

// 加载风险数据
const loadRiskData = async () => {
  riskLoading.value = true
  
  try {
    // 1. 加载风险概览
    const overview = await fetchRiskOverview()
    riskData.value = overview
    
    // 2. 加载风险事件
    const eventsData = await fetchRiskEvents()
    riskEvents.value = eventsData.events || []
    
    // 3. 基于风险环境加载推荐策略
    const recommended = await fetchStrategiesList({ risk_context: overview.risk_level })
    recommendedStrategiesForRisk.value = recommended.strategies.slice(0, 3)
    
  } catch (err) {
    console.error('Load risk data error:', err)
    error.value = '获取风险数据失败'
  } finally {
    riskLoading.value = false
  }
}

// 过滤风险事件
const filterRiskEvents = (level) => {
  riskEventFilter.value = riskEventFilter.value === level ? null : level
}

// 分析风险详情
const handleAnalyzeRiskDetail = (event) => {
  console.log('Analyze risk event:', event)
  // TODO: 打开风险详情弹窗或调用AI分析
  alert(`AI 正在分析风险事件: ${event.title}`)
}

// 风险时间线事件点击
const handleRiskTimelineEventClick = (payload) => {
  console.log('Risk timeline event clicked:', payload)
  // TODO: 显示事件详情
}

// 辅助函数
const getRiskLevelLabel = (level) => {
  const labels = {
    'low': '低风险',
    'medium': '中风险',
    'high': '高风险'
  }
  return labels[level] || level
}
</script>

2.3 添加风险雷达样式

<style scoped>
/* 风险雷达区域 */
.risk-radar-section {
  padding: 0 24px;
  margin-bottom: 48px;
}

.risk-events {
  margin-top: 32px;
}

.risk-events__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.subsection-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.risk-events__filters {
  display: flex;
  gap: 8px;
}

.filter-btn {
  padding: 8px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.filter-btn:hover {
  border-color: var(--pri);
  color: var(--text);
}

.filter-btn.active {
  background: var(--pri);
  border-color: var(--pri);
  color: white;
}

.risk-events__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.risk-timeline-wrapper {
  margin-top: 32px;
}

/* 风险与策略联动提示 */
.risk-strategy-link {
  margin-top: 32px;
  padding: 20px;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05), rgba(79, 70, 229, 0.05));
  border: 1px solid rgba(124, 58, 237, 0.2);
  border-left: 4px solid var(--pri);
  border-radius: var(--radius-lg);
}

.link-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.link-icon {
  font-size: 20px;
}

.link-strategies {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.strategy-tag {
  padding: 8px 16px;
  background: var(--card);
  border: 1px solid var(--pri);
  border-radius: var(--radius-md);
  color: var(--pri);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.strategy-tag:hover {
  background: rgba(124, 58, 237, 0.1);
  transform: translateY(-2px);
}

.loading-small {
  display: flex;
  justify-content: center;
  padding: 40px;
}

.spinner-small {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--pri);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
</style>

---

📐 第三步：调整布局（可选）

如果你希望实现「左 2/3 策略，右 1/3 风险」的布局：

<template>
  <div class="dashboard">
    <!-- ... Hero, MarketPulse, Recommendations 保持不变 -->
    
    <!-- 策略 + 风险 双栏布局 -->
    <div class="dual-column-layout">
      <!-- 左侧：策略区 (2/3 宽度) -->
      <div class="layout-main">
        <section class="strategies-section">
          <!-- 策略内容 -->
        </section>
      </div>
      
      <!-- 右侧：风险雷达 (1/3 宽度) -->
      <div class="layout-sidebar">
        <section class="risk-radar-section">
          <!-- 风险雷达内容 -->
        </section>
      </div>
    </div>
    
    <!-- ... AIDock, Error Toast 保持不变 -->
  </div>
</template>

<style scoped>
.dual-column-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 32px;
  padding: 0 24px;
  margin-bottom: 48px;
}

.layout-main,
.layout-sidebar {
  min-height: 600px;
}

.layout-main .strategies-section,
.layout-sidebar .risk-radar-section {
  padding: 0; /* 移除内部 padding，由外层控制 */
}

@media (max-width: 1024px) {
  .dual-column-layout {
    grid-template-columns: 1fr;
  }
}
</style>

---

🎯 第四步：测试和验证

4.1 启动服务

# 后端已经在运行 (端口 8001)
# 前端
cd frontend
npm run dev

4.2 访问页面

打开 http://localhost:5173/ (或 http://192.168.1.83:8090/)

4.3 检查功能

• ✅ 策略列表加载
• ✅ 策略筛选（风格、周期、风险）
• ✅ 点击「查看详情」打开抽屉，显示回测曲线
• ✅ 点击「应用此策略」应用到推荐区
• ✅ 风险雷达仪表盘显示综合指数
• ✅ 风险事件列表可筛选
• ✅ 风险时间线显示未来7天事件
• ✅ 风险与策略联动提示

---

🔥 第五步：进一步优化（可选）

5.1 个人化策略推荐

在策略卡片上显示与用户持仓的匹配度：

<StrategyCard
  v-for="strategy in strategies"
  :key="strategy.id"
  :strategy="strategy"
  :user-portfolio-overlap="calculateOverlap(strategy)"
  @viewDetail="handleViewStrategyDetail"
  @applyStrategy="handleApplyStrategy"
/>

5.2 策略与风险的动态联动

当风险等级变化时，自动调整推荐策略：

watch(
  () => riskData.value.risk_level,
  (newLevel) => {
    // 高风险环境 -> 推荐防守型策略
    if (newLevel === 'high') {
      strategyFilters.value.style = 'defensive'
      loadStrategies()
    }
  }
)

5.3 空状态优化

当「今日推荐」为空时，显示策略卡片预览：

<!-- Empty State -->
<div v-else class="empty-state">
  <div class="empty-icon">📭</div>
  <h3>当前策略暂无标的</h3>
  <p>试试切换其他策略，或查看以下推荐策略：</p>
  
  <!-- 显示热门策略预览 -->
  <div class="empty-strategies-preview">
    <StrategyCard
      v-for="strategy in strategies.slice(0, 2)"
      :key="strategy.id"
      :strategy="strategy"
      @applyStrategy="handleApplyStrategy"
    />
  </div>
</div>

---

📝 总结

完成以上步骤后，你的 DashboardV2 将具备：

✅ 主题&策略区

• 策略卡片列表（2列布局）
• 策略筛选（风格、周期、风险）
• 策略详情抽屉（回测曲线、仓位建议、AI洞察）
• 应用策略到推荐区

✅ 风险雷达区

• 风险指数仪表盘（圆环+四维指标）
• 结构化风险事件列表（可筛选）
• 风险时间线/日历（未来7天）
• 风险与策略联动提示

✅ 用户体验

• 从"展示数据"升级到"辅助决策"
• 策略与风险的联动逻辑
• 清晰的视觉层级和信息流

---

🚧 后续扩展方向

1. 个人化：根据用户持仓显示策略匹配度
2. 实时更新：使用 WebSocket 推送风险预警
3. 历史对比：策略回测vs实盘表现对比
4. AI对话：点击「AI评估」直接在AIDock中对话
5. 策略组合：支持多策略组合配置

---

需要我帮你实现哪一部分？或者有任何问题随时告诉我！