From 8643a38a81dafe4125681ab7b85ea583eae24856 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Thu, 25 Dec 2025 16:18:55 +0800 Subject: [PATCH] =?UTF-8?q?refactor(glass):=20=E6=89=B9=E6=AC=A11=20-=20?= =?UTF-8?q?=E8=BF=81=E7=A7=BB=E5=85=A8=E5=B1=80=E7=BB=84=E4=BB=B6=E4=BD=BF?= =?UTF-8?q?=E7=94=A8=E7=BB=9F=E4=B8=80=E6=AF=9B=E7=8E=BB=E7=92=83=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 迁移以下 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 --- src/components/Auth/AuthModalManager.js | 3 ++- src/components/Auth/WechatRegister.js | 3 ++- src/components/FUI/FuiContainer.tsx | 3 ++- src/components/GlassCard/index.js | 13 +++++++------ src/components/ImageLightbox/index.js | 5 +++-- src/components/ImagePreviewModal/index.js | 5 +++-- src/components/Navbars/HomeNavbar.js | 3 ++- src/components/SubTabContainer/index.tsx | 3 ++- .../Subscription/SubscriptionContentNew.tsx | 11 ++++++----- src/components/Subscription/SubscriptionModal.js | 3 ++- 10 files changed, 31 insertions(+), 21 deletions(-) diff --git a/src/components/Auth/AuthModalManager.js b/src/components/Auth/AuthModalManager.js index 358e8086..17193276 100644 --- a/src/components/Auth/AuthModalManager.js +++ b/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)' } }} diff --git a/src/components/Auth/WechatRegister.js b/src/components/Auth/WechatRegister.js index 5cbe8430..bf064b61 100644 --- a/src/components/Auth/WechatRegister.js +++ b/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} > diff --git a/src/components/FUI/FuiContainer.tsx b/src/components/FUI/FuiContainer.tsx index 5d940820..9c633523 100644 --- a/src/components/FUI/FuiContainer.tsx +++ b/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 { children: ReactNode; @@ -73,7 +74,7 @@ const FuiContainer = memo(({ border="1px solid" borderColor={theme.borderColor} overflow="hidden" - backdropFilter="blur(16px)" + backdropFilter={GLASS_BLUR.md} boxShadow={theme.boxShadow} {...boxProps} > diff --git a/src/components/GlassCard/index.js b/src/components/GlassCard/index.js index c5385bda..16ce67a4 100644 --- a/src/components/GlassCard/index.js +++ b/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)', - md: 'blur(16px)', - lg: 'blur(24px)', + sm: GLASS_BLUR.sm, + md: GLASS_BLUR.md, + lg: GLASS_BLUR.lg, }, glow: { - sm: '0 0 8px rgba(212, 175, 55, 0.3)', - md: '0 0 16px rgba(212, 175, 55, 0.4)', + sm: GLASS_SHADOW.goldSm, + md: GLASS_SHADOW.goldMd, }, }; diff --git a/src/components/ImageLightbox/index.js b/src/components/ImageLightbox/index.js index 13811a8e..018e804a 100644 --- a/src/components/ImageLightbox/index.js +++ b/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 }) => { {/* 灯箱模态框 */} - + isCentered onKeyDown={handleKeyDown} > - + {/* 关闭按钮 */} @@ -255,7 +256,7 @@ const ImagePreviewModal = ({ isOpen, onClose, images = [], initialIndex = 0 }) = borderRadius="md" px="4" py="2" - backdropFilter="blur(10px)" + backdropFilter={GLASS_BLUR.sm} > 快捷键: ← → 切换 | + - 缩放 | ESC 关闭 diff --git a/src/components/Navbars/HomeNavbar.js b/src/components/Navbars/HomeNavbar.js index 63d37692..6e65825a 100644 --- a/src/components/Navbars/HomeNavbar.js +++ b/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 }} diff --git a/src/components/SubTabContainer/index.tsx b/src/components/SubTabContainer/index.tsx index c0e3643e..bd035b64 100644 --- a/src/components/SubTabContainer/index.tsx +++ b/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 = memo(({ {/* 导航栏容器：左侧 Tab 可滚动，右侧元素固定 */} - +