refactor(glass): 批次1 - 迁移全局组件使用统一毛玻璃配置

迁移以下 10 个组件使用 glassConfig.ts 统一配置:
- GlassCard: GLASS_BLUR/GLASS_SHADOW 替换硬编码 blur/glow
- SubTabContainer: GLASS_BLUR.lg 替换 blur(20px)
- HomeNavbar: GLASS_BLUR.sm 替换 blur(10px)
- AuthModalManager: GLASS_BLUR.sm 替换 blur(10px)
- WechatRegister: GLASS_BLUR.xs 替换 blur(4px)
- SubscriptionModal: GLASS_BLUR.xs 替换 blur(4px)
- SubscriptionContentNew: GLASS_BLUR.sm/lg/xl 替换多处硬编码
- ImageLightbox: GLASS_BLUR.sm 替换 blur(10px)
- ImagePreviewModal: GLASS_BLUR.sm 替换 blur(10px)
- FuiContainer: GLASS_BLUR.md 替换 blur(16px)

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

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/Auth/AuthModalManager.js

@@ -6,6 +6,7 @@ import { useAuthModal } from '../../hooks/useAuthModal';
 import AuthFormContent from './AuthFormContent';
 import { trackEventAsync } from '@lib/posthog';
 import { ACTIVATION_EVENTS } from '@lib/constants';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * 全局认证弹窗管理器
@@ -69,7 +70,7 @@ export default function AuthModalManager() {
           overflowY: 'auto'
         },
         mask: {
-          backdropFilter: 'blur(10px)',
+          backdropFilter: GLASS_BLUR.sm,
           backgroundColor: 'rgba(0, 0, 0, 0.7)'
         }
       }}

src/components/Auth/WechatRegister.js

@@ -18,6 +18,7 @@ import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../contexts/AuthContext";
 import { logger } from "../../utils/logger";
 import { useAuthEvents } from "../../hooks/useAuthEvents";
+import { GLASS_BLUR } from "@/constants/glassConfig";
 
 // 配置常量
 const POLL_INTERVAL = 2000; // 轮询间隔：2秒
@@ -531,7 +532,7 @@ export default function WechatRegister() {
                         display="flex"
                         alignItems="center"
                         justifyContent="center"
-                        backdropFilter="blur(4px)"
+                        backdropFilter={GLASS_BLUR.xs}
                     >
                         <VStack spacing={2}>
                             <Icon as={AlertCircle} w={8} h={8} color="white" />

src/components/FUI/FuiContainer.tsx

@@ -6,6 +6,7 @@
 import React, { memo, ReactNode } from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
 import FuiCorners, { FuiCornersProps } from './FuiCorners';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 export interface FuiContainerProps extends Omit<BoxProps, 'children'> {
   children: ReactNode;
@@ -73,7 +74,7 @@ const FuiContainer = memo<FuiContainerProps>(({
       border="1px solid"
       borderColor={theme.borderColor}
       overflow="hidden"
-      backdropFilter="blur(16px)"
+      backdropFilter={GLASS_BLUR.md}
       boxShadow={theme.boxShadow}
       {...boxProps}
     >

src/components/GlassCard/index.js

@@ -7,8 +7,9 @@
 
 import React, { memo, forwardRef } from 'react';
 import { Box } from '@chakra-ui/react';
+import { GLASS_BLUR, GLASS_BG, GLASS_BORDER, GLASS_SHADOW } from '@/constants/glassConfig';
 
-// 主题配置
+// 主题配置 - 使用统一毛玻璃配置
 const GLASS_THEME = {
   colors: {
     gold: {
@@ -28,13 +29,13 @@ const GLASS_THEME = {
     },
   },
   blur: {
-    sm: 'blur(8px)',
+    sm: GLASS_BLUR.sm,
-    md: 'blur(16px)',
+    md: GLASS_BLUR.md,
-    lg: 'blur(24px)',
+    lg: GLASS_BLUR.lg,
   },
   glow: {
-    sm: '0 0 8px rgba(212, 175, 55, 0.3)',
+    sm: GLASS_SHADOW.goldSm,
-    md: '0 0 16px rgba(212, 175, 55, 0.4)',
+    md: GLASS_SHADOW.goldMd,
   },
 };
 

src/components/ImageLightbox/index.js

@@ -18,6 +18,7 @@ import {
 } from '@chakra-ui/react';
 import { ChevronLeft, ChevronRight, X, ZoomIn } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 const MotionBox = motion(Box);
 
@@ -78,7 +79,7 @@ export const ImageLightbox = ({ src, alt, ...props }) => {
 
       {/* 灯箱模态框 */}
       <Modal isOpen={isOpen} onClose={onClose} size="full" isCentered>
-        <ModalOverlay bg="blackAlpha.900" backdropFilter="blur(10px)" />
+        <ModalOverlay bg="blackAlpha.900" backdropFilter={GLASS_BLUR.sm} />
         <ModalContent bg="transparent" boxShadow="none">
           <ModalCloseButton
             position="fixed"
@@ -199,7 +200,7 @@ export const ImageGalleryLightbox = ({ images, initialIndex = 0, ...props }) =>
         isCentered
         onKeyDown={handleKeyDown}
       >
-        <ModalOverlay bg="blackAlpha.900" backdropFilter="blur(10px)" />
+        <ModalOverlay bg="blackAlpha.900" backdropFilter={GLASS_BLUR.sm} />
         <ModalContent bg="transparent" boxShadow="none">
           {/* 关闭按钮 */}
           <IconButton

src/components/ImagePreviewModal/index.js

@@ -18,6 +18,7 @@ import {
 } from '@chakra-ui/react';
 import { ChevronLeft, ChevronRight, Download, ZoomIn, ZoomOut } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 const MotionBox = motion(Box);
 
@@ -195,7 +196,7 @@ const ImagePreviewModal = ({ isOpen, onClose, images = [], initialIndex = 0 }) =
             borderRadius="full"
             px="6"
             py="3"
-            backdropFilter="blur(10px)"
+            backdropFilter={GLASS_BLUR.sm}
             zIndex="2"
           >
             <HStack spacing="4">
@@ -255,7 +256,7 @@ const ImagePreviewModal = ({ isOpen, onClose, images = [], initialIndex = 0 }) =
             borderRadius="md"
             px="4"
             py="2"
-            backdropFilter="blur(10px)"
+            backdropFilter={GLASS_BLUR.sm}
           >
             <Text color="whiteAlpha.800" fontSize="xs">
               快捷键: ← → 切换 | + - 缩放 | ESC 关闭

src/components/Navbars/HomeNavbar.js

@@ -51,6 +51,7 @@ import NavbarActions from './components/NavbarActions';
 
 // 布局配置
 import { LAYOUT_PADDING, Z_INDEX } from '../../layouts/config/layoutConfig';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 // Phase 4: MoreNavMenu 和 NavItems 组件已提取到 Navigation 目录
 
@@ -138,7 +139,7 @@ export default function HomeNavbar() {
                 right={0}
                 zIndex={Z_INDEX.NAVBAR}
                 bg={navbarBg}
-                backdropFilter="blur(10px)"
+                backdropFilter={GLASS_BLUR.sm}
                 borderBottom="1px"
                 borderColor={navbarBorder}
                 py={{ base: 2, md: 3 }}

src/components/SubTabContainer/index.tsx

@@ -36,6 +36,7 @@ import {
 } from '@chakra-ui/react';
 import type { ComponentType } from 'react';
 import type { LucideIcon } from 'lucide-react';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 /**
  * Tab 配置项
@@ -239,7 +240,7 @@ const SubTabContainer: React.FC<SubTabContainerProps> = memo(({
         {/* 导航栏容器：左侧 Tab 可滚动，右侧元素固定 */}
         <Flex
           bg={theme.bg}
-          backdropFilter="blur(20px)"
+          backdropFilter={GLASS_BLUR.lg}
           borderBottom="1px solid"
           borderColor={theme.borderColor}
           borderRadius={compact ? 0 : DEEP_SPACE.radiusLG}

src/components/Subscription/SubscriptionContentNew.tsx

@@ -46,6 +46,7 @@ import { useAuth } from '../../contexts/AuthContext';
 import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';
 import { subscriptionConfig, themeColors } from '../../views/Pages/Account/subscription-content';
 import { getApiBase } from '../../utils/apiConfig';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 // 会员协议 URL 配置
 const AGREEMENT_URLS = {
@@ -76,7 +77,7 @@ function CycleSelector({ options, selectedCycle, onSelectCycle }: CycleSelectorP
       borderRadius="xl"
       border="1px solid"
       borderColor="rgba(255, 255, 255, 0.1)"
-      backdropFilter="blur(10px)"
+      backdropFilter={GLASS_BLUR.sm}
       justify="center"
       align="center"
       w={{ base: 'full', md: 'auto' }}
@@ -947,7 +948,7 @@ export default function SubscriptionContentNew() {
               bg="rgba(212, 175, 55, 0.05)"
               border="2px solid"
               borderColor="rgba(212, 175, 55, 0.3)"
-              backdropFilter="blur(20px)"
+              backdropFilter={GLASS_BLUR.lg}
               maxW="600px"
               mx="auto"
               position="relative"
@@ -1171,7 +1172,7 @@ export default function SubscriptionContentNew() {
                     mt={-1}
                     p={3.5}
                     pb={8}
-                    backdropFilter={isPremium ? 'blur(32px)' : 'blur(20px)'}
+                    backdropFilter={isPremium ? GLASS_BLUR.xl : GLASS_BLUR.lg}
                     bg={isPremium ? 'rgba(255, 255, 255, 0.07)' : 'rgba(255, 255, 255, 0.01)'}
                     borderRadius="20px"
                     _after={{
@@ -1191,7 +1192,7 @@ export default function SubscriptionContentNew() {
                       p={6}
                       borderRadius="16px"
                       bg={isPremium ? 'rgba(212, 175, 55, 0.1)' : 'rgba(255, 255, 255, 0.03)'}
-                      backdropFilter="blur(20px)"
+                      backdropFilter={GLASS_BLUR.lg}
                       boxShadow="0 8px 32px rgba(0, 0, 0, 0.4)"
                       _after={{
                         content: '""',
@@ -1323,7 +1324,7 @@ export default function SubscriptionContentNew() {
             p={8}
             borderRadius="2xl"
             bg="rgba(30, 30, 30, 0.5)"
-            backdropFilter="blur(20px)"
+            backdropFilter={GLASS_BLUR.lg}
             border="1px solid"
             borderColor="rgba(255, 255, 255, 0.1)"
             maxW="900px"

src/components/Subscription/SubscriptionModal.js

@@ -15,11 +15,12 @@ import {
 import { Star } from 'lucide-react';
 import PropTypes from 'prop-types';
 import SubscriptionContent from './SubscriptionContent';
+import { GLASS_BLUR } from '@/constants/glassConfig';
 
 export default function SubscriptionModal({ isOpen, onClose }) {
   return (
     <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered scrollBehavior="inside">
-      <ModalOverlay backdropFilter="blur(4px)" />
+      <ModalOverlay backdropFilter={GLASS_BLUR.xs} />
       <ModalContent maxH="90vh">
         <ModalHeader borderBottomWidth="1px" borderColor={useColorModeValue('gray.200', 'gray.600')}>
           <HStack>