Skip to content

ROCKALPHA_STYLE_UPGRADE.md

Latest commit

 

History

History
230 lines (186 loc) · 6.54 KB

ROCKALPHA_STYLE_UPGRADE.md

File metadata and controls

230 lines (186 loc) · 6.54 KB

RockAlpha 风格升级

🎯 目标

将 AI Trading 分析面板升级为 RockAlpha 风格，提供更清晰、更专业的文本展示。

📸 参考设计

根据 RockAlpha 截图，核心特点：

  1. ✅ 大块文本展示 - 完整段落，不折叠
  2. ✅ 清晰的 AI 标识 - 圆形图标 + 模型名称
  3. ✅ 时间戳显示 - 显示分析时间
  4. ✅ 可读性强 - 字体清晰、行距合适
  5. ✅ 简洁的底部信息 - 价格、技术指标以标签形式展示

🎨 升级内容

1. 卡片样式优化

之前：

<Paper elevation={2} sx={{ p: 2, borderLeft: '4px solid...' }}>
  {/* 紧凑的布局 */}
</Paper>

现在（RockAlpha 风格）：

<Paper 
  elevation={1} 
  sx={{ 
    p: 2.5,
    borderRadius: 2,
    bgcolor: '#ffffff',
    border: '1px solid #e0e0e0',
  }}
>
  {/* 更舒适的间距 */}
</Paper>

2. 头部设计

RockAlpha 风格头部：

┌─────────────────────────────────┐
│ [🤖]  AAPL    BUY               │
│       19:22 • 信心度 88%         │
└─────────────────────────────────┘
  • 圆形 AI 图标（32x32px）
  • 股票代码 + 操作标签
  • 时间 + 信心度在第二行

3. 文本展示（最重要！）

之前：

{/* 默认折叠，需要点击展开 */}
<IconButton onClick={toggleExpand}>
  查看完整思考过程
</IconButton>
<Collapse in={expanded}>
  <Typography>{chainOfThought}</Typography>
</Collapse>

现在（RockAlpha 风格）：

{/* 默认展开，完整显示 */}
<Typography sx={{
  fontSize: '0.875rem',
  lineHeight: 1.8,
  whiteSpace: 'pre-wrap',
  color: '#2c3e50',
  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto',
}}>
  NVDA carving fresh records at $209, and the technical 
  fortress is pristine. MA20 golden-crossed MA50 three 
  sessions ago, MACD just flipped bullish this morning...
</Typography>

4. 底部信息

RockAlpha 风格底部：

───────────────────────────────────
💰 $209.00  ⚖️ R:R 3:1  MA20 golden cross  MACD bullish
  • 分隔线
  • 小标签展示关键信息
  • 不显示过多细节

5. 格言提取

自动提取最后一句作为格言：

{/* 提取思考过程的最后一句 */}
<Typography sx={{ color: '#7c3aed', fontStyle: 'italic' }}>
  💡 Breakouts with volume don't ask permission. Execute.
</Typography>

📊 对比效果

旧版（紧凑风格）

┌─────────────────────────────┐
│ 🔼 AAPL  BUY  19:22         │
│ 💰 $150.25  🎯 88%          │
│ MA: 突破MA20  MACD: 金叉     │
│                              │
│ • 技术指标共振...            │
│ • 成交量放大...              │
│                              │
│ [查看完整思考过程 ▼]         │
└─────────────────────────────┘

新版（RockAlpha 风格）

┌─────────────────────────────────────────┐
│ [🤖]  AAPL     BUY                      │
│       19:22 • 信心度 88%                 │
│                                          │
│ NVDA carving fresh records at $209,      │
│ and the technical fortress is pristine.  │
│ MA20 golden-crossed MA50 three sessions  │
│ ago, MACD just flipped bullish this      │
│ morning, volume surging 2.3x average—    │
│ institutions are voting with size. RSI   │
│ 58 leaves plenty of runway before        │
│ overbought territory. The setup screams  │
│ institutional accumulation, not retail   │
│ FOMO. Entry here at $209 with stop at    │
│ $203 captures 3:1 risk-reward to $227.   │
│                                          │
│ ─────────────────────────────────────   │
│ 💰 $209.00  ⚖️ R:R 3:1  MA20 golden     │
│ ─────────────────────────────────────   │
│ 💡 Breakouts with volume don't ask       │
│    permission. Execute.                  │
└─────────────────────────────────────────┘

🎯 核心改进

  1. 文本默认展开 - 不需要点击查看
  2. 更大的字号 - 0.875rem (14px)
  3. 更舒适的行距 - lineHeight: 1.8
  4. 更好的字体 - Apple 系统字体
  5. 清晰的层次 - 头部/正文/底部明确分隔

🚀 使用效果

启用战术型 Prompt 后，AI 会生成 150-300 字的完整分析，现在会完整展示：

// 战术型分析示例
"NVDA carving fresh records at $209, and the technical fortress 
is pristine. MA20 golden-crossed MA50 three sessions ago, MACD 
just flipped bullish this morning, volume surging 2.3x average—
institutions are voting with size. RSI 58 leaves plenty of runway 
before overbought territory..."

📱 响应式设计

  • 移动端：卡片宽度 100%，字体略小
  • 平板：卡片宽度 100%，标准字体
  • 桌面：卡片宽度适应容器，标准字体

🎨 颜色方案

const colors = {
  background: '#ffffff',
  border: '#e0e0e0',
  text: '#2c3e50',
  secondary: '#666',
  buyAction: '#4caf50',
  sellAction: '#f44336',
  holdAction: '#9e9e9e',
  principle: '#7c3aed',  // 紫色，用于格言
}

🔄 迁移指南

步骤 1：更新组件

已完成 - AiAnalysisPanel.tsx 已更新

步骤 2：启用战术型 Prompt

确保 .env 文件中：

AI_ANALYSIS_STYLE=tactical

步骤 3：重启后端

cd backend
uvicorn app.main:app --reload

步骤 4：刷新前端

浏览器刷新页面即可

📚 相关文档

🎯 下一步

  • 添加多模型支持（Claude, ChatGPT, DeepSeek 并行）
  • 支持用户自定义字体大小
  • 添加夜间模式
  • 支持分析文本导出

版本：V2.0 - RockAlpha Style 更新日期：2025-11-03 灵感来源：RockAlpha Model Chats