ljwx-stock/DASHBOARD_OPTIMIZATION_GUIDE.md

Dashboard 优化实施指南

📋 项目概述

本文档记录了 Dashboard 的主题&策略区和风险雷达区的完整优化方案。

优化目标

1. 主题&策略区：从简单标签 → 策略卡片列表，提供更丰富的决策信息
2. 风险雷达区：从新闻列表 → 真正的风险监控仪表盘
3. 联动机制：实现策略推荐与风险评估的智能联动

---

✅ 已完成工作

一、后端 API 开发

1. 策略管理 API (backend/app/routes/strategies.py)

核心接口：

# 1. 获取策略列表（支持筛选）
GET /api/strategies/list?style=value&period=long&risk_level=low

返回数据结构：
{
  "strategies": [
    {
      "id": "ai_comprehensive",
      "name": "AI 价值精选",
      "tagline": "侧重低估蓝筹，中长期滚动",
      "metrics": {
        "return_1m": 0.058,      # 近1月收益
        "return_3m": 0.132,      # 近3月收益
        "return_6m": 0.241,      # 近6月收益
        "max_drawdown": -0.078,  # 最大回撤
        "win_rate": 0.67,        # 胜率
        "sharpe_ratio": 1.82     # 夏普比率
      },
      "top_stocks": [            # TOP3 代表标的
        {
          "symbol": "600000",
          "name": "浦发银行",
          "industry": "银行",
          "change_pct": 2.34,
          "score": 95
        }
      ],
      "ai_comment": "AI 认为当前处于第 2 阶段上升行情...",
      "recommendation_score": 85  # 当前推荐度 (0-100)
    }
  ]
}

# 2. 获取策略详情（用于详情抽屉）
GET /api/strategies/{strategy_id}/detail

返回数据结构：
{
  "strategy": {...},
  "backtest": {               # 回测曲线
    "dates": [...],
    "net_values": [...],
    "benchmark_values": [...],
    "drawdowns": [...]
  },
  "position_advice": {        # 仓位建议
    "suggested_holding_period": "3-6 个月",
    "target_audience": "平衡型投资者",
    "position_range": "30-50%",
    "rebalance_frequency": "每月调整"
  },
  "ai_insights": {            # AI 深度洞察
    "current_phase": "震荡上行期",
    "phase_timeline": [...],
    "key_logic": [...],
    "risk_warnings": [...]
  }
}

内置策略配置：

• ai_comprehensive - AI 价值精选
• value_focus - 深度低估
• momentum_trend - 动量趋势
• defensive_stable - 稳健防守

---

2. 风险雷达 API (backend/app/routes/risk_radar.py)

核心接口：

# 1. 获取风险总览（仪表盘数据）
GET /api/risk/overview

返回数据结构：
{
  "overall_risk_score": 45,   # 综合风险指数 0-100
  "risk_level": "medium",     # low/medium/high
  "dimensions": {
    "policy": 35,             # 政策&宏观风险
    "liquidity": 52,          # 流动性&资金面
    "technical": 48,          # 技术面风险
    "sentiment": 41           # 情绪&舆情
  },
  "trend": "stable"           # increasing/stable/decreasing
}

# 2. 获取风险事件列表（结构化）
GET /api/risk/events?level=high&category=policy

返回数据结构：
{
  "events": [
    {
      "id": "evt_001",
      "level": "high",        # low/medium/high
      "category": "policy",   # policy/liquidity/sector/stock/external/technical
      "title": "上证权重财报窗口期",
      "description": "...",
      "impact": {
        "scope": "指数级",
        "affected_count": 150,
        "volatility_range": [-3.0, 1.0],
        "historical_avg_drawdown": -2.1
      },
      "ai_suggestion": "适度控制高估值成长股仓位...",
      "user_exposure": {      # 与用户资产的关系
        "affected_holdings": 3,
        "sectors": ["科技", "医药"]
      },
      "probability": 0.75
    }
  ]
}

# 3. 获取风险时间线（未来7天）
GET /api/risk/timeline?days=7

返回数据结构：
{
  "timeline": [
    {
      "date": "2025-11-16",
      "weekday": "Saturday",
      "events": [
        {
          "time": "09:30",
          "title": "央行公开市场操作",
          "category": "policy",
          "risk_level": "medium"
        }
      ],
      "risk_score": 45
    }
  ]
}

# 4. 获取策略风险联动（关键！）
GET /api/risk/strategy-impact

返回数据结构：
{
  "current_environment": "中等风险震荡市",
  "overall_risk_score": 52,
  "recommended_strategies": [    # 推荐提升权重的策略
    {
      "strategy_id": "defensive_stable",
      "reason": "当前宏观风险偏高，稳健策略更适合",
      "weight_adjustment": "+20%"
    }
  ],
  "affected_strategies": [       # 受负面影响的策略
    {
      "strategy_id": "momentum_trend",
      "impact": "negative",
      "reason": "市场波动加剧，动量策略回撤风险上升",
      "weight_adjustment": "-25%"
    }
  ]
}

---

二、前端组件开发

1. StrategyCard 组件 (frontend/src/components/StrategyCard.vue)

功能特性：

• ✅ 策略名称 + 一句话定位
• ✅ 推荐度进度条（0-100，动态颜色）
• ✅ 核心指标网格（近1/3月收益、最大回撤、胜率、夏普比率）
• ✅ TOP3 代表标的（股票名、行业、涨跌幅）
• ✅ AI 一句话观点
• ✅ 操作按钮（查看详情、应用策略）
• ✅ 风险等级色条（左侧边框）

Props：

{
  strategy: {
    id: String,
    name: String,
    tagline: String,
    style: String,          // comprehensive/value/momentum/defensive
    period: String,         // short/mid/long
    risk_level: String,     // low/medium/high
    metrics: Object,
    top_stocks: Array,
    ai_comment: String,
    recommendation_score: Number
  }
}

Events：

• @viewDetail - 点击"查看详情"
• @applyStrategy - 点击"应用此策略"

---

2. RiskRadarGauge 组件 (frontend/src/components/RiskRadarGauge.vue)

功能特性：

• ✅ 左侧：综合风险指数圆环图（ECharts）
• ✅ 中间：风险等级文字（低/中/高）
• ✅ 右侧：四维风险柱状图
  • 政策&宏观
  • 流动性&资金面
  • 技术面风险
  • 情绪&舆情
• ✅ 动态颜色（绿色=低风险，黄色=中风险，红色=高风险）

Props：

{
  riskData: {
    overall_risk_score: Number,   // 0-100
    risk_level: String,           // low/medium/high
    dimensions: {
      policy: Number,
      liquidity: Number,
      technical: Number,
      sentiment: Number
    }
  }
}

---

3. RiskEventCard 组件 (frontend/src/components/RiskEventCard.vue)

功能特性：

• ✅ 风险等级图标（左侧，带颜色背景）
• ✅ 事件标题 + 类型标签
• ✅ 事件描述
• ✅ 影响指标网格：
  • 影响范围
  • 受影响股票数量
  • 预估波动区间
  • 历史平均回撤
  • 发生概率
• ✅ AI 建议（带图标）
• ✅ 与用户资产的关系（如有持仓受影响）
• ✅ 事件日期范围
• ✅ 查看详细评估按钮

Props：

{
  event: {
    id: String,
    level: String,          // low/medium/high
    category: String,       // policy/liquidity/sector/stock/external/technical
    title: String,
    description: String,
    impact: Object,
    ai_suggestion: String,
    user_exposure: Object,
    start_date: String,
    end_date: String,
    probability: Number
  }
}

Events：

• @analyzeDetail - 点击"查看详细评估"

---

4. API 服务层 (frontend/src/services/api.js)

新增方法：

// 策略管理
fetchStrategiesList(filters)       // 获取策略列表
fetchStrategyDetail(strategyId)    // 获取策略详情

// 风险雷达
fetchRiskOverview()                // 获取风险总览
fetchRiskEvents(filters)           // 获取风险事件列表
fetchRiskTimeline(days)            // 获取风险时间线
fetchStrategyRiskImpact()          // 获取策略风险联动

---

🚧 待实现功能

剩余组件（可选）

1. StrategyDetailDrawer - 策略详情侧边抽屉

   • 回测曲线图（ECharts 折线图）
   • 仓位建议面板
   • AI 深度洞察（阶段时间线）

2. RiskTimeline - 风险时间线组件

   • 横向时间轴
   • 日期节点标记
   • 事件浮窗提示

3. DashboardV2.vue 重构 - 主页面布局调整

   • 上：今日推荐（保持现有）
   • 左下：主题&策略（2/3 宽）
   • 右下：风险雷达（1/3 宽）

---

🎯 下一步实施建议

方案 A：完整实现（推荐）

如果你想要完整的功能体验，按以下顺序继续：

1. 创建 StrategyDetailDrawer 组件

   # 我可以帮你生成这个组件
   

2. 重构 DashboardV2.vue

   <template>
     <div class="dashboard">
       <!-- 保持现有的 Hero 和 Market Pulse -->
       <HeroSection ... />
       <MarketPulse ... />
   
       <!-- 保持现有的今日推荐 -->
       <section class="recommendations">...</section>
   
       <!-- 新增：主题&策略 + 风险雷达并排布局 -->
       <div class="dashboard__grid">
         <!-- 左侧：策略区 (2/3) -->
         <section class="strategies-section">
           <h2>主题 & 策略</h2>
           <div class="strategy-grid">
             <StrategyCard
               v-for="strategy in strategies"
               :key="strategy.id"
               :strategy="strategy"
               @viewDetail="openStrategyDrawer"
               @applyStrategy="applyStrategy"
             />
           </div>
         </section>
   
         <!-- 右侧：风险雷达 (1/3) -->
         <section class="risk-radar-section">
           <h2>风险雷达</h2>
           <RiskRadarGauge :riskData="riskOverview" />
           <div class="risk-events-list">
             <RiskEventCard
               v-for="event in riskEvents"
               :key="event.id"
               :event="event"
               @analyzeDetail="analyzeRiskDetail"
             />
           </div>
         </section>
       </div>
   
       <!-- 策略详情抽屉 -->
       <StrategyDetailDrawer
         v-if="selectedStrategy"
         :strategy="selectedStrategy"
         @close="closeStrategyDrawer"
       />
     </div>
   </template>
   
   <script setup>
   import { ref, onMounted } from 'vue'
   import StrategyCard from '@/components/StrategyCard.vue'
   import RiskRadarGauge from '@/components/RiskRadarGauge.vue'
   import RiskEventCard from '@/components/RiskEventCard.vue'
   import {
     fetchStrategiesList,
     fetchRiskOverview,
     fetchRiskEvents,
     fetchStrategyRiskImpact
   } from '@/services/api'
   
   const strategies = ref([])
   const riskOverview = ref(null)
   const riskEvents = ref([])
   const selectedStrategy = ref(null)
   
   const loadData = async () => {
     try {
       // 1. 加载风险数据
       const riskData = await fetchRiskOverview()
       riskOverview.value = riskData
   
       // 2. 加载风险事件
       const eventsData = await fetchRiskEvents()
       riskEvents.value = eventsData.events
   
       // 3. 加载策略列表
       const strategiesData = await fetchStrategiesList()
       strategies.value = strategiesData.strategies
   
       // 4. 加载策略风险联动（用于标注）
       const impactData = await fetchStrategyRiskImpact()
   
       // 5. 根据风险影响标注策略
       markStrategiesWithRiskImpact(strategies.value, impactData)
     } catch (error) {
       console.error('Load data error:', error)
     }
   }
   
   const markStrategiesWithRiskImpact = (strategies, impactData) => {
     // 为受影响的策略添加标记
     impactData.affected_strategies.forEach(affected => {
       const strategy = strategies.find(s => s.id === affected.strategy_id)
       if (strategy) {
         strategy.riskImpact = {
           type: 'negative',
           reason: affected.reason,
           adjustment: affected.weight_adjustment
         }
       }
     })
   
     // 为推荐策略添加标记
     impactData.recommended_strategies.forEach(recommended => {
       const strategy = strategies.find(s => s.id === recommended.strategy_id)
       if (strategy) {
         strategy.riskImpact = {
           type: 'positive',
           reason: recommended.reason,
           adjustment: recommended.weight_adjustment
         }
       }
     })
   }
   
   onMounted(() => {
     loadData()
   })
   </script>
   
   <style scoped>
   .dashboard__grid {
     display: grid;
     grid-template-columns: 2fr 1fr;
     gap: 24px;
     padding: 0 24px;
     margin-bottom: 48px;
   }
   
   .strategy-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
   }
   
   .risk-events-list {
     display: flex;
     flex-direction: column;
     gap: 16px;
     margin-top: 20px;
   }
   
   @media (max-width: 1024px) {
     .dashboard__grid {
       grid-template-columns: 1fr;
     }
   }
   </style>
   

3. 测试 API 接口

   # 启动后端
   cd backend
   uvicorn main:app --reload
   
   # 测试策略 API
   curl http://localhost:8000/api/strategies/list
   curl http://localhost:8000/api/strategies/ai_comprehensive/detail
   
   # 测试风险 API
   curl http://localhost:8000/api/risk/overview
   curl http://localhost:8000/api/risk/events
   curl http://localhost:8000/api/risk/timeline
   curl http://localhost:8000/api/risk/strategy-impact
   

---

方案 B：快速验证（推荐用于演示）

如果你想快速看到效果，可以：

1. 直接在现有 Dashboard 中集成核心组件

   • 在 DashboardV2.vue 的"主题&策略"区域替换为 StrategyCard
   • 在"风险雷达"区域添加 RiskRadarGauge + RiskEventCard

2. 使用模拟数据测试

   // 临时模拟数据（在组件内部）
   const mockStrategies = [
     {
       id: 'ai_comprehensive',
       name: 'AI 价值精选',
       tagline: '侧重低估蓝筹，中长期滚动',
       style: 'comprehensive',
       period: 'mid_long',
       risk_level: 'medium',
       metrics: {
         return_1m: 0.058,
         return_3m: 0.132,
         return_6m: 0.241,
         max_drawdown: -0.078,
         win_rate: 0.67,
         sharpe_ratio: 1.82
       },
       top_stocks: [
         { symbol: '600000', name: '浦发银行', industry: '银行', change_pct: 2.34, score: 95 }
       ],
       ai_comment: 'AI 认为当前处于第 2 阶段上升行情...',
       recommendation_score: 85
     }
   ]
   

3. 后续再连接真实 API

---

📊 数据流架构

Frontend Components
    ↓
API Service Layer (api.js)
    ↓
Backend FastAPI Routes
    ↓
├─ strategies.py
│  ├─ /list → 策略列表
│  └─ /{id}/detail → 策略详情
│
└─ risk_radar.py
   ├─ /overview → 风险总览
   ├─ /events → 风险事件
   ├─ /timeline → 风险时间线
   └─ /strategy-impact → 策略风险联动

---

🎨 视觉设计要点

颜色系统

/* 风险等级 */
--success: #10b981  /* 低风险 */
--warn: #f59e0b     /* 中风险 */
--risk: #ef4444     /* 高风险 */

/* 策略类型 */
--pri: #7c3aed      /* AI综合 */
--blue: #3b82f6     /* 价值 */
--green: #10b981    /* 防守 */
--orange: #f59e0b   /* 动量 */

布局断点

/* Desktop: 主题2/3 + 风险1/3 */
@media (min-width: 1025px) {
  .dashboard__grid {
    grid-template-columns: 2fr 1fr;
  }
}

/* Tablet: 垂直堆叠 */
@media (max-width: 1024px) {
  .dashboard__grid {
    grid-template-columns: 1fr;
  }
}

---

🔧 故障排查

API 404 错误

# 确认路由已注册
cd backend
grep "strategies\|risk_radar" main.py

# 应该看到：
# from app.routes import ... strategies, risk_radar
# app.include_router(strategies.router, ...)

CORS 错误

# backend/app/config.py
CORS_ORIGINS = [
  "http://localhost:5173",  # Vite dev server
  "http://localhost:8090",  # Docker frontend
  "http://192.168.1.83:8090"
]

ECharts 加载错误

// 确认已安装 echarts
npm install echarts

// 确认导入正确
import * as echarts from 'echarts'

---

📝 最后的话

已实现功能总结

✅ 后端 API：

• 策略管理（列表、详情）
• 风险雷达（总览、事件、时间线、联动）

✅ 前端组件：

• StrategyCard（策略卡片）
• RiskRadarGauge（风险仪表盘）
• RiskEventCard（风险事件卡片）

✅ API 服务层：

• 所有新接口的 fetch 方法

预估工作量

• 方案 A（完整实现）：约 4-6 小时
• 方案 B（快速验证）：约 1-2 小时

后续增强方向

1. 个性化：

   • 用户持仓分析
   • 策略适配度打分
   • 风险敞口计算

2. 交互优化：

   • 策略对比功能
   • 风险事件订阅
   • 一键应用策略

3. 数据增强：

   • 接入真实回测引擎
   • 实时风险监控
   • 历史策略表现追踪

---

如果需要继续实现剩余功能，随时告诉我，我可以帮你生成 StrategyDetailDrawer 组件或完整的 DashboardV2 重构代码！ 🚀