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

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

Browse Source 
- index.js: 10+ 处使用 GLASS_BLUR.lg/sm
- ConceptTimelineModal.js: Modal overlay 使用 GLASS_BLUR.sm/lg
- BreadcrumbNav.js: 深色主题样式使用 GLASS_BLUR.lg
- ConceptStatsPanel.js: 玻璃态卡片使用 GLASS_BLUR.lg
- HierarchyView.js: 4处使用 GLASS_BLUR.lg/sm
- ForceGraphView.js: 4处使用 GLASS_BLUR.lg

🤖 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:39:48 +08:00
parent b0e1a4f474
commit 3911095022
6 changed files with 32 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/views/Concept/ConceptTimelineModal.js
View File

@@ -80,6 +80,7 @@ const formatUrl = (url) => {
}; };
import { getApiBase } from '@utils/apiConfig'; import { getApiBase } from '@utils/apiConfig';
import { GLASS_BLUR } from '@/constants/glassConfig';
// API配置 - 生产环境通过 api.valuefrontier.cn 代理 // API配置 - 生产环境通过 api.valuefrontier.cn 代理
const API_BASE_URL = process.env.NODE_ENV === 'production' const API_BASE_URL = process.env.NODE_ENV === 'production'
@@ -667,13 +668,13 @@ const ConceptTimelineModal = ({
scrollBehavior="inside" scrollBehavior="inside"
isCentered isCentered
> >
<ModalOverlay bg="blackAlpha.800" backdropFilter="blur(8px)" /> <ModalOverlay bg="blackAlpha.800" backdropFilter={GLASS_BLUR.sm} />
<ModalContent <ModalContent
maxW="1400px" maxW="1400px"
m={{ base: 0, md: 'auto' }} m={{ base: 0, md: 'auto' }}
mx="auto" mx="auto"
bg="rgba(15, 23, 42, 0.95)" bg="rgba(15, 23, 42, 0.95)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
> >
@@ -909,7 +910,7 @@ const ConceptTimelineModal = ({
size="4xl" size="4xl"
scrollBehavior="inside" scrollBehavior="inside"
> >
<ModalOverlay bg="blackAlpha.800" backdropFilter="blur(8px)" /> <ModalOverlay bg="blackAlpha.800" backdropFilter={GLASS_BLUR.sm} />
<ModalContent <ModalContent
borderRadius="2xl" borderRadius="2xl"
overflow="hidden" overflow="hidden"
@@ -1228,7 +1229,7 @@ const ConceptTimelineModal = ({
size="4xl" size="4xl"
scrollBehavior="inside" scrollBehavior="inside"
> >
<ModalOverlay bg="blackAlpha.800" backdropFilter="blur(8px)" /> <ModalOverlay bg="blackAlpha.800" backdropFilter={GLASS_BLUR.sm} />
<ModalContent bg="rgba(15, 23, 42, 0.95)" border="1px solid" borderColor="whiteAlpha.100"> <ModalContent bg="rgba(15, 23, 42, 0.95)" border="1px solid" borderColor="whiteAlpha.100">
<ModalHeader bg="rgba(15, 23, 42, 0.98)" borderBottom="1px solid" borderColor="whiteAlpha.100" color="white"> <ModalHeader bg="rgba(15, 23, 42, 0.98)" borderBottom="1px solid" borderColor="whiteAlpha.100" color="white">
<VStack align="start" spacing={1}> <VStack align="start" spacing={1}>
@@ -1330,7 +1331,7 @@ const ConceptTimelineModal = ({
size="4xl" size="4xl"
scrollBehavior="inside" scrollBehavior="inside"
> >
<ModalOverlay bg="blackAlpha.800" backdropFilter="blur(8px)" /> <ModalOverlay bg="blackAlpha.800" backdropFilter={GLASS_BLUR.sm} />
<ModalContent bg="rgba(15, 23, 42, 0.95)" border="1px solid" borderColor="whiteAlpha.100"> <ModalContent bg="rgba(15, 23, 42, 0.95)" border="1px solid" borderColor="whiteAlpha.100">
<ModalHeader bg="rgba(15, 23, 42, 0.98)" borderBottom="1px solid" borderColor="whiteAlpha.100" color="white"> <ModalHeader bg="rgba(15, 23, 42, 0.98)" borderBottom="1px solid" borderColor="whiteAlpha.100" color="white">
<VStack align="start" spacing={1}> <VStack align="start" spacing={1}>

3
src/views/Concept/components/BreadcrumbNav.js
View File

@@ -17,6 +17,7 @@ import {
Tooltip, Tooltip,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { ChevronRight, Filter, X, Home } from 'lucide-react'; import { ChevronRight, Filter, X, Home } from 'lucide-react';
import { GLASS_BLUR } from '@/constants/glassConfig';
const BreadcrumbNav = ({ const BreadcrumbNav = ({
filter, filter,
@@ -60,7 +61,7 @@ const BreadcrumbNav = ({
const darkStyles = { const darkStyles = {
container: { container: {
bg: 'rgba(15, 23, 42, 0.8)', bg: 'rgba(15, 23, 42, 0.8)',
backdropFilter: 'blur(20px)', backdropFilter: GLASS_BLUR.lg,
borderColor: 'whiteAlpha.100', borderColor: 'whiteAlpha.100',
}, },
filterBadge: { filterBadge: {

5
src/views/Concept/components/ConceptStatsPanel.js
View File

@@ -47,6 +47,7 @@ import {
TrendingUp, TrendingUp,
TrendingDown, TrendingDown,
} from 'lucide-react'; } from 'lucide-react';
import { GLASS_BLUR } from '@/constants/glassConfig';
const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => { const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
// 获取正确的API基础URL // 获取正确的API基础URL
@@ -585,7 +586,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
{/* 顶部标题卡片 - 深色玻璃态 */} {/* 顶部标题卡片 - 深色玻璃态 */}
<Box <Box
bg="rgba(15, 23, 42, 0.8)" bg="rgba(15, 23, 42, 0.8)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
p={4} p={4}
borderRadius="xl" borderRadius="xl"
mb={4} mb={4}
@@ -767,7 +768,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
</Box> </Box>
{/* 主内容卡片 - 深色玻璃态 */} {/* 主内容卡片 - 深色玻璃态 */}
<Box bg={bg} backdropFilter="blur(20px)" borderRadius="xl" border="1px" borderColor={borderColor} overflow="hidden"> <Box bg={bg} backdropFilter={GLASS_BLUR.lg} borderRadius="xl" border="1px" borderColor={borderColor} overflow="hidden">
<Tabs <Tabs
index={activeTab} index={activeTab}
onChange={(index) => { onChange={(index) => {

9
src/views/Concept/components/ForceGraphView.js
View File

@@ -44,6 +44,7 @@ import {
ArrowLeft, ArrowLeft,
} from 'lucide-react'; } from 'lucide-react';
import { logger } from '../../../utils/logger'; import { logger } from '../../../utils/logger';
import { GLASS_BLUR } from '@/constants/glassConfig';
// 极光动画 - 黑金色主题 // 极光动画 - 黑金色主题
const auroraAnimation = keyframes` const auroraAnimation = keyframes`
@@ -1016,7 +1017,7 @@ const ForceGraphView = ({
h="500px" h="500px"
bg="rgba(15, 23, 42, 0.6)" bg="rgba(15, 23, 42, 0.6)"
borderRadius="3xl" borderRadius="3xl"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
> >
@@ -1047,7 +1048,7 @@ const ForceGraphView = ({
h="500px" h="500px"
bg="rgba(15, 23, 42, 0.6)" bg="rgba(15, 23, 42, 0.6)"
borderRadius="3xl" borderRadius="3xl"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
> >
@@ -1289,7 +1290,7 @@ const ForceGraphView = ({
> >
<HStack <HStack
bg="rgba(255, 255, 255, 0.08)" bg="rgba(255, 255, 255, 0.08)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
px={4} px={4}
py={2} py={2}
borderRadius="full" borderRadius="full"
@@ -1332,7 +1333,7 @@ const ForceGraphView = ({
> >
<HStack <HStack
bg="rgba(255, 255, 255, 0.06)" bg="rgba(255, 255, 255, 0.06)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
px={4} px={4}
py={2} py={2}
borderRadius="full" borderRadius="full"

9
src/views/Concept/components/HierarchyView.js
View File

@@ -62,6 +62,7 @@ import {
ExternalLink, ExternalLink,
} from 'lucide-react'; } from 'lucide-react';
import { logger } from '../../../utils/logger'; import { logger } from '../../../utils/logger';
import { GLASS_BLUR } from '@/constants/glassConfig';
// 一级分类图标映射 // 一级分类图标映射
const LV1_ICONS = { const LV1_ICONS = {
@@ -274,7 +275,7 @@ const GlassCard = ({ item, onClick, size = 'normal' }) => {
right={0} right={0}
bottom={0} bottom={0}
bg={getChangeGradient(item.avg_change_pct)} bg={getChangeGradient(item.avg_change_pct)}
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
border="1px solid" border="1px solid"
borderColor="whiteAlpha.200" borderColor="whiteAlpha.200"
borderRadius="2xl" borderRadius="2xl"
@@ -319,7 +320,7 @@ const GlassCard = ({ item, onClick, size = 'normal' }) => {
p={2} p={2}
bg="whiteAlpha.150" bg="whiteAlpha.150"
borderRadius="xl" borderRadius="xl"
backdropFilter="blur(10px)" backdropFilter={GLASS_BLUR.sm}
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
flexShrink={0} flexShrink={0}
@@ -402,7 +403,7 @@ const GlassCard = ({ item, onClick, size = 'normal' }) => {
borderRadius="full" borderRadius="full"
px={2} px={2}
py={0.5} py={0.5}
backdropFilter="blur(10px)" backdropFilter={GLASS_BLUR.sm}
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
> >
@@ -821,7 +822,7 @@ const HierarchyView = ({
mb={5} mb={5}
p={3} p={3}
bg="whiteAlpha.50" bg="whiteAlpha.50"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
borderRadius="2xl" borderRadius="2xl"
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"

21
src/views/Concept/index.js
View File

@@ -134,6 +134,7 @@ import { marketService } from '../../services/marketService';
import { useConceptEvents } from './hooks/useConceptEvents'; import { useConceptEvents } from './hooks/useConceptEvents';
import { getApiBase } from '@utils/apiConfig'; import { getApiBase } from '@utils/apiConfig';
import { GLASS_BLUR } from '@/constants/glassConfig';
// API配置 - 生产环境通过 api.valuefrontier.cn 代理 // API配置 - 生产环境通过 api.valuefrontier.cn 代理
const API_BASE_URL = process.env.NODE_ENV === 'production' const API_BASE_URL = process.env.NODE_ENV === 'production'
@@ -872,7 +873,7 @@ const ConceptCenter = () => {
cursor="pointer" cursor="pointer"
onClick={() => handleConceptClick(concept.concept_id, concept.concept, concept, position)} onClick={() => handleConceptClick(concept.concept_id, concept.concept, concept, position)}
bg="rgba(15, 23, 42, 0.8)" bg="rgba(15, 23, 42, 0.8)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
borderWidth="1px" borderWidth="1px"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
overflow="hidden" overflow="hidden"
@@ -996,7 +997,7 @@ const ConceptCenter = () => {
top={3} top={3}
right={3} right={3}
bg="rgba(0, 0, 0, 0.4)" bg="rgba(0, 0, 0, 0.4)"
backdropFilter="blur(10px)" backdropFilter={GLASS_BLUR.sm}
color="white" color="white"
fontSize="xs" fontSize="xs"
px={3} px={3}
@@ -1040,7 +1041,7 @@ const ConceptCenter = () => {
width="100%" width="100%"
p={{ base: 2, md: 3 }} p={{ base: 2, md: 3 }}
bg="whiteAlpha.50" bg="whiteAlpha.50"
backdropFilter="blur(10px)" backdropFilter={GLASS_BLUR.sm}
borderRadius="xl" borderRadius="xl"
cursor="pointer" cursor="pointer"
onClick={(e) => handleViewStocks(e, concept)} onClick={(e) => handleViewStocks(e, concept)}
@@ -1201,7 +1202,7 @@ const ConceptCenter = () => {
cursor="pointer" cursor="pointer"
onClick={() => handleConceptClick(concept.concept_id, concept.concept, concept, position)} onClick={() => handleConceptClick(concept.concept_id, concept.concept, concept, position)}
bg="rgba(15, 23, 42, 0.8)" bg="rgba(15, 23, 42, 0.8)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
borderWidth="1px" borderWidth="1px"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
overflow="hidden" overflow="hidden"
@@ -1439,7 +1440,7 @@ const ConceptCenter = () => {
<Box <Box
p={4} p={4}
bg="rgba(15, 23, 42, 0.8)" bg="rgba(15, 23, 42, 0.8)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
borderRadius="2xl" borderRadius="2xl"
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
@@ -1652,7 +1653,7 @@ const ConceptCenter = () => {
spacing={6} spacing={6}
divider={<Box w="1px" h="30px" bg="whiteAlpha.300" />} divider={<Box w="1px" h="30px" bg="whiteAlpha.300" />}
bg="whiteAlpha.100" bg="whiteAlpha.100"
backdropFilter="blur(10px)" backdropFilter={GLASS_BLUR.sm}
px={8} px={8}
py={3} py={3}
borderRadius="full" borderRadius="full"
@@ -1690,7 +1691,7 @@ const ConceptCenter = () => {
<Flex <Flex
align="center" align="center"
bg="rgba(255, 255, 255, 0.95)" bg="rgba(255, 255, 255, 0.95)"
backdropFilter="blur(10px)" backdropFilter={GLASS_BLUR.sm}
borderRadius="full" borderRadius="full"
overflow="hidden" overflow="hidden"
boxShadow="0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.2)" boxShadow="0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(139, 92, 246, 0.2)"
@@ -1795,7 +1796,7 @@ const ConceptCenter = () => {
<Card <Card
mb={8} mb={8}
bg="rgba(15, 23, 42, 0.8)" bg="rgba(15, 23, 42, 0.8)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
boxShadow="0 4px 20px rgba(0, 0, 0, 0.3)" boxShadow="0 4px 20px rgba(0, 0, 0, 0.3)"
@@ -1981,7 +1982,7 @@ const ConceptCenter = () => {
<HStack <HStack
spacing={3} spacing={3}
bg="rgba(15, 23, 42, 0.8)" bg="rgba(15, 23, 42, 0.8)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
px={6} px={6}
py={3} py={3}
borderRadius="full" borderRadius="full"
@@ -2102,7 +2103,7 @@ const ConceptCenter = () => {
) : ( ) : (
<Card <Card
bg="rgba(15, 23, 42, 0.8)" bg="rgba(15, 23, 42, 0.8)"
backdropFilter="blur(20px)" backdropFilter={GLASS_BLUR.lg}
border="1px solid" border="1px solid"
borderColor="whiteAlpha.100" borderColor="whiteAlpha.100"
borderRadius="2xl" borderRadius="2xl"