vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
迁移以下 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>
This commit is contained in:
zdl
2025-12-25 16:18:55 +08:00
parent 49f71af0c5
commit 8643a38a81
10 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/Auth/AuthModalManager.js
View File

@@ -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)'
}
}}

3
src/components/Auth/WechatRegister.js
View File

@@ -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" />

3
src/components/FUI/FuiContainer.tsx
View File

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

13
src/components/GlassCard/index.js
View File

@@ -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,
},
};

5
src/components/ImageLightbox/index.js
View File

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

5
src/components/ImagePreviewModal/index.js
View File

@@ -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 关闭

3
src/components/Navbars/HomeNavbar.js
View File

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

3
src/components/SubTabContainer/index.tsx
View File

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

11
src/components/Subscription/SubscriptionContentNew.tsx
View File

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

3
src/components/Subscription/SubscriptionModal.js
View File

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