From e714dc1dff5d7a418d0b58acf32e8ad7612bdb26 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Mon, 29 Dec 2025 17:54:00 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E9=99=A4=E6=B7=B1?= =?UTF-8?q?=E8=89=B2=E6=A8=A1=E5=BC=8F=E6=94=AF=E6=8C=81=EF=BC=8C=E7=AE=80?= =?UTF-8?q?=E5=8C=96=E4=B8=BB=E9=A2=98=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - theme.js: 添加 config 配置强制使用浅色主题 - AppProviders.js: 移除冗余的 colorModeManager 配置 - 删除未使用的 Configurator 组件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/Configurator/Configurator.js | 202 ------------------- src/providers/AppProviders.js | 7 - src/theme/theme.js | 9 +- src/views/StockOverview/README.md | 213 ++++++++++++++++++++ 4 files changed, 221 insertions(+), 210 deletions(-) delete mode 100755 src/components/Configurator/Configurator.js create mode 100644 src/views/StockOverview/README.md diff --git a/src/components/Configurator/Configurator.js b/src/components/Configurator/Configurator.js deleted file mode 100755 index e23cfb4b..00000000 --- a/src/components/Configurator/Configurator.js +++ /dev/null @@ -1,202 +0,0 @@ -/*! - -========================================================= -* Argon Dashboard Chakra PRO - v1.0.0 -========================================================= - -* Product Page: https://www.creative-tim.com/product/argon-dashboard-chakra-pro -* Copyright 2022 Creative Tim (https://www.creative-tim.com/) - -* Designed and Coded by Simmmple & Creative Tim - -========================================================= - -* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -*/ - -// Chakra Imports -// Chakra Imports -import { - Box, - Button, - Drawer, - DrawerBody, - DrawerCloseButton, - DrawerContent, - DrawerHeader, - Flex, - Icon, - Link, - Switch, - Text, - useColorMode, - useColorModeValue, -} from "@chakra-ui/react"; -import GitHubButton from "react-github-btn"; -import { HSeparator } from "components/Separator/Separator"; -import PropTypes from "prop-types"; -import React, { useState } from "react"; -import { Twitter, Facebook } from "lucide-react"; - -export default function Configurator(props) { - const { - sidebarVariant, - setSidebarVariant, - secondary, - isOpen, - onClose, - fixed, - ...rest - } = props; - const [switched, setSwitched] = useState(props.isChecked); - - const { colorMode, toggleColorMode } = useColorMode(); - - let bgButton = useColorModeValue( - "linear-gradient(81.62deg, #313860 2.25%, #151928 79.87%)", - "white" - ); - let colorButton = useColorModeValue("white", "gray.700"); - const secondaryButtonBg = useColorModeValue("white", "transparent"); - const secondaryButtonBorder = useColorModeValue("gray.700", "white"); - const secondaryButtonColor = useColorModeValue("gray.700", "white"); - const bgDrawer = useColorModeValue("white", "navy.800"); - const settingsRef = React.useRef(); - return ( - <> - - - - - - Argon Chakra Configurator - - - See your dashboard options. - - - - - - - - Navbar Fixed - - { - if (switched === true) { - props.onSwitch(false); - setSwitched(false); - } else { - props.onSwitch(true); - setSwitched(true); - } - }} - /> - - - - Dark/Light - - - - - - - - - - - - - - - - - Star - - - - - Thank you for sharing! - - - - - - - - - - - - - - - - - ); -} -Configurator.propTypes = { - secondary: PropTypes.bool, - isOpen: PropTypes.bool, - onClose: PropTypes.func, - fixed: PropTypes.bool, -}; diff --git a/src/providers/AppProviders.js b/src/providers/AppProviders.js index b4c3a93f..2cd7df0f 100644 --- a/src/providers/AppProviders.js +++ b/src/providers/AppProviders.js @@ -41,13 +41,6 @@ export function AppProviders({ children }) { 'light', // 始终返回 'light' - set: () => {}, // 禁止设置（忽略切换操作） - }} toastOptions={{ defaultOptions: { position: 'top', diff --git a/src/theme/theme.js b/src/theme/theme.js index 48471c58..eada8bef 100755 --- a/src/theme/theme.js +++ b/src/theme/theme.js @@ -40,7 +40,14 @@ const ContainerComponent = { }; export default extendTheme( - { breakpoints }, // Breakpoints + { + // 强制使用浅色主题，禁用深色模式 + config: { + initialColorMode: 'light', + useSystemColorMode: false, + }, + breakpoints, + }, globalStyles, buttonStyles, // Button styles badgeStyles, // Badge styles diff --git a/src/views/StockOverview/README.md b/src/views/StockOverview/README.md new file mode 100644 index 00000000..19d2ca14 --- /dev/null +++ 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 链接