From ae445ee2347cab99f36790a151961a89669d2983 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 25 Dec 2025 16:33:45 +0800
Subject: [PATCH] =?UTF-8?q?refactor(StockOverview):=20=E8=BF=81=E7=A7=BB?=
 =?UTF-8?q?=E6=AF=9B=E7=8E=BB=E7=92=83=E6=95=88=E6=9E=9C=E5=88=B0=E7=BB=9F?=
 =?UTF-8?q?=E4=B8=80=E9=85=8D=E7=BD=AE=20-=20=E6=89=B9=E6=AC=A14?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.js: 使用 GLASS_BLUR.lg 替代 blur(20px)
- glassTheme.js: 从全局 glassConfig 导入配置
- FlexScreen/index.tsx: 使用 GLASS_BLUR.lg
- QuoteTile.tsx: 使用 GLASS_BLUR.sm
- AlertDetailDrawer.js: 使用 GLASS_BLUR.xs/lg

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../FlexScreen/components/QuoteTile.tsx       |  3 +-
 .../components/FlexScreen/index.tsx           |  3 +-
 .../components/AlertDetailDrawer.js           |  5 +--
 src/views/StockOverview/index.js              |  3 +-
 src/views/StockOverview/theme/glassTheme.js   | 36 ++++++++++---------
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx b/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx
index 8240b9d6..63ca9caf 100644
--- a/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx
+++ b/src/views/StockOverview/components/FlexScreen/components/QuoteTile.tsx
@@ -19,6 +19,7 @@ import { useNavigate } from 'react-router-dom';
 import MiniTimelineChart from './MiniTimelineChart';
 import OrderBookPanel from './OrderBookPanel';
 import type { QuoteTileProps, QuoteData } from '../types';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * 格式化价格显示
@@ -141,7 +142,7 @@ const QuoteTile: React.FC<QuoteTileProps> = ({
       borderRadius="lg"
       overflow="hidden"
       transition="all 0.2s"
-      backdropFilter="blur(10px)"
+      backdropFilter={GLASS_BLUR.sm}
       _hover={{
         borderColor: hoverBorderColor,
         boxShadow: '0 4px 20px rgba(139, 92, 246, 0.2)',
diff --git a/src/views/StockOverview/components/FlexScreen/index.tsx b/src/views/StockOverview/components/FlexScreen/index.tsx
index 8a91337f..9ecca2fe 100644
--- a/src/views/StockOverview/components/FlexScreen/index.tsx
+++ b/src/views/StockOverview/components/FlexScreen/index.tsx
@@ -50,6 +50,7 @@ import QuoteTile from './components/QuoteTile';
 import { logger } from '@utils/logger';
 import { getApiBase } from '@utils/apiConfig';
 import type { WatchlistItem, ConnectionStatus } from './types';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 // 本地存储 key
 const STORAGE_KEY = 'flexscreen_watchlist';
@@ -278,7 +279,7 @@ const FlexScreen: React.FC = () => {
       bg={cardBg}
       borderWidth="1px"
       borderColor={borderColor}
-      backdropFilter="blur(20px)"
+      backdropFilter={GLASS_BLUR.lg}
       borderRadius="16px"
     >
       <CardBody>
diff --git a/src/views/StockOverview/components/HotspotOverview/components/AlertDetailDrawer.js b/src/views/StockOverview/components/HotspotOverview/components/AlertDetailDrawer.js
index 4a8f55f7..6c1145d0 100644
--- a/src/views/StockOverview/components/HotspotOverview/components/AlertDetailDrawer.js
+++ b/src/views/StockOverview/components/HotspotOverview/components/AlertDetailDrawer.js
@@ -27,6 +27,7 @@ import {
   Portal,
 } from '@chakra-ui/react';
 import { keyframes, css } from '@emotion/react';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 import {
   Clock,
   Zap,
@@ -451,10 +452,10 @@ const AlertDetailDrawer = ({ isOpen, onClose, alertData }) => {
       onClose={onClose}
       size="md"
     >
-      <DrawerOverlay bg="rgba(0, 0, 0, 0.6)" backdropFilter="blur(4px)" />
+      <DrawerOverlay bg="rgba(0, 0, 0, 0.6)" backdropFilter={GLASS_BLUR.xs} />
       <DrawerContent
         bg="rgba(10, 10, 15, 0.95)"
-        backdropFilter="blur(20px)"
+        backdropFilter={GLASS_BLUR.lg}
         borderLeft="1px solid rgba(255, 255, 255, 0.1)"
       >
         <DrawerCloseButton
diff --git a/src/views/StockOverview/index.js b/src/views/StockOverview/index.js
index 64f7b9ca..85e51abb 100644
--- a/src/views/StockOverview/index.js
+++ b/src/views/StockOverview/index.js
@@ -57,6 +57,7 @@ import { echarts } from '@lib/echarts';
 import { logger } from '../../utils/logger';
 import tradingDays from '../../data/tradingDays.json';
 import { useStockOverviewEvents } from './hooks/useStockOverviewEvents';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 // 交易日 Set，用于快速查找
 const tradingDaysSet = new Set(tradingDays);
@@ -894,7 +895,7 @@ const StockOverview = () => {
           ) : (
             <Card
               bg={cardBg}
-              backdropFilter="blur(20px)"
+              backdropFilter={GLASS_BLUR.lg}
               borderWidth="1px"
               borderColor={borderColor}
               borderRadius="24px"
diff --git a/src/views/StockOverview/theme/glassTheme.js b/src/views/StockOverview/theme/glassTheme.js
index d761bcac..7583f776 100644
--- a/src/views/StockOverview/theme/glassTheme.js
+++ b/src/views/StockOverview/theme/glassTheme.js
@@ -3,8 +3,12 @@
  *
  * 设计理念：打造漂浮在深空中的半透明玻璃态数据终端
  * 强调光影深度、弥散背景光和极致圆角
+ *
+ * 注意: 毛玻璃效果配置已迁移至全局 @/constants/glassConfig.ts
  */
 
+import { GLASS_BLUR, GLASS_BG, GLASS_BORDER, GLASS_SHADOW } from '@/constants/glassConfig';
+
 // 极光背景渐变配置
 export const auroraGradients = {
   // 主背景 - 深空极光
@@ -27,42 +31,42 @@ export const auroraGradients = {
   `,
 };
 
-// 毛玻璃效果配置
+// 毛玻璃效果配置 - 使用全局统一配置
 export const glassEffect = {
   // 标准玻璃卡片
   card: {
-    bg: 'rgba(255, 255, 255, 0.03)',
-    backdropFilter: 'blur(20px) saturate(180%)',
-    border: '1px solid rgba(255, 255, 255, 0.08)',
+    bg: GLASS_BG.medium,
+    backdropFilter: `${GLASS_BLUR.lg} saturate(180%)`,
+    border: GLASS_BORDER.light,
     borderRadius: '24px',
     boxShadow: `
-      0 8px 32px rgba(0, 0, 0, 0.3),
-      inset 0 1px 0 rgba(255, 255, 255, 0.05)
+      ${GLASS_SHADOW.md},
+      ${GLASS_SHADOW.inset}
     `,
   },
   // 轻量玻璃 - 用于内部元素
   light: {
-    bg: 'rgba(255, 255, 255, 0.02)',
-    backdropFilter: 'blur(12px)',
-    border: '1px solid rgba(255, 255, 255, 0.05)',
+    bg: GLASS_BG.light,
+    backdropFilter: GLASS_BLUR.md,
+    border: GLASS_BORDER.subtle,
     borderRadius: '16px',
   },
   // 强调玻璃 - 用于重要元素
   accent: {
     bg: 'rgba(139, 92, 246, 0.1)',
-    backdropFilter: 'blur(16px) saturate(200%)',
+    backdropFilter: `${GLASS_BLUR.md} saturate(200%)`,
     border: '1px solid rgba(139, 92, 246, 0.2)',
     borderRadius: '20px',
     boxShadow: '0 4px 24px rgba(139, 92, 246, 0.15)',
   },
   // 悬浮玻璃 - 用于弹出层
   floating: {
-    bg: 'rgba(20, 20, 30, 0.9)',
-    backdropFilter: 'blur(24px) saturate(200%)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
+    bg: GLASS_BG.overlay,
+    backdropFilter: `${GLASS_BLUR.lg} saturate(200%)`,
+    border: GLASS_BORDER.light,
     borderRadius: '20px',
     boxShadow: `
-      0 25px 50px -12px rgba(0, 0, 0, 0.5),
+      ${GLASS_SHADOW.lg},
       0 0 0 1px rgba(255, 255, 255, 0.05)
     `,
   },
@@ -259,8 +263,8 @@ export const presets = {
 export const tooltipStyles = {
   container: {
     bg: 'rgba(15, 15, 25, 0.95)',
-    backdropFilter: 'blur(16px)',
-    border: '1px solid rgba(255, 255, 255, 0.1)',
+    backdropFilter: GLASS_BLUR.md,
+    border: GLASS_BORDER.light,
     borderRadius: '12px',
     boxShadow: '0 20px 40px rgba(0, 0, 0, 0.5)',
     p: 3,