refactor: 移除深色模式支持，简化主题配置

- theme.js: 添加 config 配置强制使用浅色主题 - AppProviders.js: 移除冗余的 colorModeManager 配置 - 删除未使用的 Configurator 组件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-29 17:54:00 +08:00
parent e9c9f1ba7c
commit e714dc1dff
4 changed files with 221 additions and 210 deletions
--- a/src/views/StockOverview/README.md
+++ b/src/views/StockOverview/README.md
@@ -0,0 +1,213 @@
+# StockOverview - 个股中心页面
+
+> 路由: `/stocks`
+> 页面标题: 股票概览
+> 保护模式: MODAL（未登录显示认证弹窗）
+
+## 目录结构
+
+```
+src/views/StockOverview/
+├── index.js                           # 页面主入口组件
+├── README.md                          # 本文档
+├── hooks/
+│   └── useStockOverviewEvents.js      # 页面事件追踪 Hook (PostHog)
+├── theme/
+│   └── glassTheme.js                  # Glassmorphism 主题配置
+└── components/
+    ├── FlexScreen/                    # 灵活屏组件（自选行情监控）
+    │   ├── index.tsx                  # 灵活屏主组件
+    │   ├── types.ts                   # TypeScript 类型定义
+    │   ├── components/
+    │   │   ├── index.ts               # 组件导出
+    │   │   ├── QuoteTile.tsx          # 行情瓷砖卡片
+    │   │   ├── MiniTimelineChart.tsx  # 迷你分时图
+    │   │   └── OrderBookPanel.tsx     # 五档盘口面板
+    │   └── hooks/
+    │       ├── index.ts               # Hooks 导出
+    │       ├── constants.ts           # WebSocket 配置常量
+    │       ├── utils.ts               # 工具函数
+    │       └── useRealtimeQuote.ts    # 实时行情 WebSocket Hook
+    └── HotspotOverview/               # 热点概览组件（大盘走势+概念异动）
+        ├── index.js                   # 热点概览主组件
+        ├── components/
+        │   ├── index.js               # 组件导出
+        │   ├── IndexMinuteChart.js    # 指数分时图（ECharts）
+        │   ├── AlertSummary.js        # 异动统计摘要
+        │   ├── ConceptAlertList.js    # 概念异动列表
+        │   └── AlertDetailDrawer.js   # 异动详情抽屉
+        ├── hooks/
+        │   ├── index.js               # Hooks 导出
+        │   └── useHotspotData.js      # 热点数据获取 Hook
+        └── utils/
+            ├── index.js               # 工具导出
+            └── chartHelpers.js        # 图表辅助函数
+```
+
+---
+
+## 页面功能
+
+### 1. Hero Section（顶部区域）
+- **标题**: "个股中心" + 副标题
+- **搜索框**: 支持股票代码、名称、拼音首字母搜索
+- **市场统计卡片**:
+  - A股总市值
+  - 今日成交额
+  - 上涨/下跌家数
+
+### 2. 日期选择器
+- 基于交易日历的日期选择
+- 切换日期会同步更新所有数据
+
+### 3. 热点概览 (HotspotOverview)
+- **指数信息**: 显示上证指数实时点位、涨跌幅
+- **异动统计**: 今日概念异动次数和类型分布
+- **分时走势图**: 大盘分时 + 概念异动标注点（可点击查看详情）
+- **异动列表**: 横向滚动的异动卡片
+
+### 4. 灵活屏 (FlexScreen)
+- **自选证券管理**: 添加/删除关注的股票或指数
+- **实时行情**: WebSocket 推送（上交所 SSE + 深交所 SZSE）
+- **行情瓷砖卡片**:
+  - 实时价格、涨跌幅
+  - 迷你分时图
+  - 五档盘口（股票）/ 10档盘口（深交所）
+- **本地存储**: 自选列表持久化
+
+### 5. 今日热门概念
+- 每日涨幅靠前的 6 个概念板块
+- 显示概念名称、涨跌幅、包含股票数
+- 点击查看概念详情 HTML 页面
+- 点击股票标签可查看个股列表
+
+### 6. 市值热力图
+- ECharts Treemap 树图
+- 按市值分组: 超大盘/大盘/中盘/小盘/微盘
+- 颜色映射涨跌幅
+- 点击跳转公司详情页
+
+---
+
+## 核心组件
+
+### FlexScreen（灵活屏）
+
+**功能**:
+1. 自选证券管理（本地存储）
+2. WebSocket 实时行情订阅
+3. 分时图 + 五档盘口展示
+
+**实时行情连接**:
+```
+上交所 (SSE): ws(s)://域名/ws/sse
+深交所 (SZSE): ws(s)://域名/ws/szse
+```
+
+**订阅协议** (v4.0 API):
+```json
+// 订阅
+{ "action": "subscribe", "channels": ["stock", "index"], "codes": ["000001", "600519"] }
+
+// 心跳
+{ "action": "ping" } -> { "type": "pong" }
+
+// 取消订阅
+{ "action": "unsubscribe", "codes": ["000001"] }
+```
+
+### HotspotOverview（热点概览）
+
+**数据来源**:
+- API: `GET /api/market/hotspot-overview?date=YYYY-MM-DD`
+- 返回: 指数分时数据 + 概念异动列表
+
+**异动类型**:
+- `surge` / `surge_up`: 急涨
+- `surge_down`: 急跌
+- `volume_spike`: 放量异动
+- `trend_reversal`: 趋势反转
+
+---
+
+## 主题系统
+
+### Glassmorphism 设计语言
+
+采用现代 Spatial Design 风格，特点：
+- 半透明毛玻璃背景
+- 深空极光渐变
+- 发光边框和文字阴影
+- 大圆角卡片
+
+**核心配置** (`theme/glassTheme.js`):
+```js
+// 玻璃效果
+glassEffect.card = {
+  bg: 'rgba(255, 255, 255, 0.03)',
+  backdropFilter: 'blur(20px) saturate(180%)',
+  border: '1px solid rgba(255, 255, 255, 0.08)',
+  borderRadius: '24px',
+}
+
+// 涨跌颜色
+colors.market = {
+  up: '#ef4444',     // 红色上涨
+  down: '#22c55e',   // 绿色下跌
+}
+
+// 强调色
+colors.accent.purple = '#8b5cf6'
+```
+
+---
+
+## 事件追踪
+
+页面集成 PostHog 埋点，通过 `useStockOverviewEvents` Hook：
+
+| 事件 | 触发时机 |
+|------|----------|
+| `STOCK_OVERVIEW_VIEWED` | 页面加载 |
+| `STOCK_LIST_VIEWED` | 市场统计数据加载 |
+| `SEARCH_INITIATED` | 开始搜索 |
+| `STOCK_SEARCHED` | 搜索查询 |
+| `SEARCH_RESULT_CLICKED` | 点击搜索结果 |
+| `CONCEPT_CLICKED` | 点击概念卡片 |
+| `STOCK_CLICKED` | 点击热力图股票 |
+| `SEARCH_FILTER_APPLIED` | 切换日期 |
+
+---
+
+## API 依赖
+
+| 接口 | 方法 | 说明 |
+|------|------|------|
+| `/api/stocks/search` | GET | 股票搜索 |
+| `/api/concepts/daily-top` | GET | 今日热门概念 |
+| `/api/market/heatmap` | GET | 市值热力图数据 |
+| `/api/market/statistics` | GET | 市场统计数据 |
+| `/api/market/hotspot-overview` | GET | 热点概览数据 |
+| `/api/flex-screen/quotes` | POST | 初始行情数据（盘后回退） |
+| `/ws/sse` | WebSocket | 上交所实时行情 |
+| `/ws/szse` | WebSocket | 深交所实时行情 |
+
+---
+
+## 技术栈
+
+- **UI 框架**: Chakra UI + Emotion CSS-in-JS
+- **图表**: ECharts (热力图、分时图)
+- **实时通信**: 原生 WebSocket
+- **状态管理**: React Hooks (useState, useEffect, useCallback)
+- **本地存储**: localStorage
+- **事件追踪**: PostHog
+- **TypeScript**: 灵活屏组件完全使用 TS
+
+---
+
+## 相关链接
+
+- 公司详情页: `/company?scode=股票代码`
+- 概念中心: `/concepts`
+- 概念详情: 通过 `getConceptHtmlUrl()` 生成外部 HTML 链接