refactor(StockOverview): 迁移毛玻璃效果到统一配置 - 批次4

- 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>

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)',

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>

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

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"

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,