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/components/Configurator/Configurator.js
+++ b/src/components/Configurator/Configurator.js
@@ -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 (
-    <>
-      <Drawer
-        isOpen={props.isOpen}
-        onClose={props.onClose}
-        placement={document.documentElement.dir === "rtl" ? "left" : "right"}
-        finalFocusRef={settingsRef}
-        blockScrollOnMount={false}>
-        <DrawerContent bg={bgDrawer}>
-          <DrawerHeader pt='24px' px='24px'>
-            <DrawerCloseButton />
-            <Text fontSize='xl' fontWeight='bold' mt='16px'>
-              Argon Chakra Configurator
-            </Text>
-            <Text fontSize='md' mb='16px'>
-              See your dashboard options.
-            </Text>
-            <HSeparator />
-          </DrawerHeader>
-          <DrawerBody w='340px' ps='24px' pe='40px'>
-            <Flex flexDirection='column'>
-              <Flex justifyContent='space-between ' mb='16px'>
-                <Text fontSize='md' fontWeight='600' mb='4px'>
-                  Navbar Fixed
-                </Text>
-                <Switch
-                  colorScheme='blue'
-                  isChecked={switched}
-                  onChange={() => {
-                    if (switched === true) {
-                      props.onSwitch(false);
-                      setSwitched(false);
-                    } else {
-                      props.onSwitch(true);
-                      setSwitched(true);
-                    }
-                  }}
-                />
-              </Flex>
-              <Flex
-                justifyContent='space-between'
-                alignItems='center'
-                mb='24px'>
-                <Text fontSize='md' fontWeight='600' mb='4px'>
-                  Dark/Light
-                </Text>
-                <Button onClick={toggleColorMode} color={secondaryButtonColor}>
-                  Toggle {colorMode === "light" ? "Dark" : "Light"}
-                </Button>
-              </Flex>
-
-              <HSeparator />
-              <Box mt='24px'>
-                <Box>
-                  <Link
-                    href='https://www.creative-tim.com/product/argon-dashboard-chakra'
-                    w='100%'
-                    mb='16px'>
-                    <Button
-                      w='100%'
-                      mb='16px'
-                      bg={bgButton}
-                      color={colorButton}
-                      fontSize='xs'
-                      variant='no-effects'
-                      px='30px'>
-                      Free Download
-                    </Button>
-                  </Link>
-                  <Link
-                    href='https://demos.creative-tim.com/docs-argon-dashboard-chakra'
-                    w='100%'>
-                    <Button
-                      w='100%'
-                      bg={secondaryButtonBg}
-                      border='1px solid'
-                      borderColor={secondaryButtonBorder}
-                      color={secondaryButtonColor}
-                      fontSize='xs'
-                      variant='no-effects'
-                      px='20px'
-                      mb='16px'>
-                      <Text textDecorationColor='none'>Documentation</Text>
-                    </Button>
-                  </Link>
-                </Box>
-                <Flex
-                  justifyContent='center'
-                  alignItems='center'
-                  w='100%'
-                  mb='16px'>
-                  <GitHubButton
-                    href='https://github.com/creativetimofficial/ct-argon-dashboard-chakra-pro'
-                    data-icon='octicon-star'
-                    data-show-count='true'
-                    aria-label='Star creativetimofficial/ct-argon-dashboard-chakra-pro on GitHub'>
-                    Star
-                  </GitHubButton>
-                </Flex>
-                <Box w='100%'>
-                  <Text mb='6px' textAlign='center'>
-                    Thank you for sharing!
-                  </Text>
-                  <Flex justifyContent='center' alignContent='center'>
-                    <Link
-                      isExternal='true'
-                      href='https://twitter.com/intent/tweet?url=https://www.creative-tim.com/product/argon-dashboard-chakra-pro/&text=Check%20Argon%20Dashboard%20Chakra%20PRO%20made%20by%20@simmmple_web%20and%20@CreativeTim'>
-                      <Button
-                        colorScheme='twitter'
-                        leftIcon={<Twitter size={16} />}
-                        me='10px'>
-                        <Text>Tweet</Text>
-                      </Button>
-                    </Link>
-                    <Link
-                      isExternal='true'
-                      href='https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/argon-dashboard-chakra-pro/'>
-                      <Button colorScheme='facebook' leftIcon={<Facebook size={16} />}>
-                        <Text>Share</Text>
-                      </Button>
-                    </Link>
-                  </Flex>
-                </Box>
-              </Box>
-            </Flex>
-          </DrawerBody>
-        </DrawerContent>
-      </Drawer>
-    </>
-  );
-}
-Configurator.propTypes = {
-  secondary: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
-  fixed: PropTypes.bool,
-};
--- a/src/providers/AppProviders.js
+++ b/src/providers/AppProviders.js
@@ -41,13 +41,6 @@ export function AppProviders({ children }) {
        <ReduxProvider store={store}>
            <ChakraProvider
                theme={theme}
-                // ✅ 强制使用浅色主题（禁用深色模式）
-                colorModeManager={{
-                    type: 'cookie',
-                    ssr: false,
-                    get: () => 'light', // 始终返回 'light'
-                    set: () => {}, // 禁止设置（忽略切换操作）
-                }}
                toastOptions={{
                    defaultOptions: {
                        position: 'top',
--- 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
--- 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 链接