From a626c6c872caae628b0498912e351330dd7ce26e Mon Sep 17 00:00:00 2001 From: zzlgreat Date: Tue, 23 Dec 2025 09:50:04 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0Company=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E7=9A=84UI=E4=B8=BAFUI=E9=A3=8E=E6=A0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../EventDetailPanel/CollapsibleHeader.js | 9 +- .../EventDetailPanel/CollapsibleSection.js | 5 +- .../DynamicNewsDetailPanel.js | 5 +- .../layouts/MainlineTimelineView.js | 4 +- .../EventDetailModal/EventDetailModal.less | 133 +++++++++++++++++- .../EventDetailModal/EventDetailModal.tsx | 40 +++++- 6 files changed, 175 insertions(+), 21 deletions(-) diff --git a/src/components/EventDetailPanel/CollapsibleHeader.js b/src/components/EventDetailPanel/CollapsibleHeader.js index 77799a64..9c47ecd5 100644 --- a/src/components/EventDetailPanel/CollapsibleHeader.js +++ b/src/components/EventDetailPanel/CollapsibleHeader.js @@ -10,9 +10,9 @@ import { Badge, IconButton, Button, - useColorModeValue, } from '@chakra-ui/react'; import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons'; +import { PROFESSIONAL_COLORS } from '@constants/professionalTheme'; /** * 可折叠模块标题组件 @@ -38,9 +38,10 @@ const CollapsibleHeader = ({ onModeToggle = null, isLocked = false }) => { - const sectionBg = useColorModeValue('gray.50', 'gray.750'); - const hoverBg = useColorModeValue('gray.100', 'gray.700'); - const headingColor = useColorModeValue('gray.700', 'gray.200'); + // 使用深色主题颜色 + const sectionBg = 'rgba(26, 31, 46, 0.6)'; + const hoverBg = 'rgba(33, 38, 51, 0.8)'; + const headingColor = PROFESSIONAL_COLORS.text.primary; // 获取按钮文案 const getButtonText = () => { diff --git a/src/components/EventDetailPanel/CollapsibleSection.js b/src/components/EventDetailPanel/CollapsibleSection.js index 289e2b80..2ad10aec 100644 --- a/src/components/EventDetailPanel/CollapsibleSection.js +++ b/src/components/EventDetailPanel/CollapsibleSection.js @@ -5,10 +5,8 @@ import React, { useState } from 'react'; import { Box, Collapse, - useColorModeValue, } from '@chakra-ui/react'; import CollapsibleHeader from './CollapsibleHeader'; -import { PROFESSIONAL_COLORS } from '@constants/professionalTheme'; /** * 通用可折叠区块组件 @@ -38,7 +36,8 @@ const CollapsibleSection = ({ showModeToggle = false, defaultMode = 'detailed' }) => { - const sectionBg = PROFESSIONAL_COLORS.background.secondary; + // 使用半透明深色背景 + const sectionBg = 'rgba(21, 25, 34, 0.6)'; // 模式状态：'detailed' | 'simple' const [displayMode, setDisplayMode] = useState(defaultMode); diff --git a/src/components/EventDetailPanel/DynamicNewsDetailPanel.js b/src/components/EventDetailPanel/DynamicNewsDetailPanel.js index a2d16d1b..ef0569e4 100644 --- a/src/components/EventDetailPanel/DynamicNewsDetailPanel.js +++ b/src/components/EventDetailPanel/DynamicNewsDetailPanel.js @@ -86,8 +86,9 @@ const sectionReducer = (state, action) => { const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { const dispatch = useDispatch(); const { user } = useAuth(); - const cardBg = PROFESSIONAL_COLORS.background.card; - const borderColor = PROFESSIONAL_COLORS.border.default; + // 使用半透明背景以支持毛玻璃效果 + const cardBg = 'rgba(26, 31, 46, 0.6)'; + const borderColor = 'rgba(255, 255, 255, 0.08)'; const textColor = PROFESSIONAL_COLORS.text.secondary; // 使用 useWatchlist Hook 管理自选股 diff --git a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js index 49eba932..232f4348 100644 --- a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js +++ b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js @@ -130,12 +130,12 @@ const TimelineEventItem = React.memo(({ event, isSelected, onEventClick }) => { {/* 第二行：标题 */} {event.title} diff --git a/src/views/Community/components/EventDetailModal/EventDetailModal.less b/src/views/Community/components/EventDetailModal/EventDetailModal.less index e2378b3f..6707f9fc 100644 --- a/src/views/Community/components/EventDetailModal/EventDetailModal.less +++ b/src/views/Community/components/EventDetailModal/EventDetailModal.less @@ -1,7 +1,132 @@ -// 事件详情抽屉样式（从底部弹出） -// 注意：大部分样式已在 TSX 的 styles 属性中配置，这里只保留必要的覆盖 -.event-detail-drawer { - // 标题样式 +// 事件详情抽屉样式（从底部弹出）- 深色毛玻璃风格 + +// 深色主题变量 +@glass-bg: rgba(20, 24, 35, 0.95); +@glass-header-bg: rgba(26, 31, 46, 0.98); +@glass-border: rgba(255, 255, 255, 0.1); +@glass-text: #E8E9ED; +@glass-text-secondary: #A0A4B8; +@glass-card-bg: rgba(26, 31, 46, 0.85); +@glass-section-bg: rgba(21, 25, 34, 0.7); + +.event-detail-drawer-dark { + // 移除白色外边框和阴影 + .ant-drawer-content-wrapper { + box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5) !important; + } + + // 内容容器 - 深色毛玻璃效果 + .ant-drawer-content { + background: @glass-bg !important; + backdrop-filter: blur(24px) !important; + -webkit-backdrop-filter: blur(24px) !important; + } + + // 标题样式 - 深色主题 + .ant-drawer-title { + color: @glass-text !important; + font-size: 16px; + font-weight: 600; + line-height: 1.4; + max-width: calc(100% - 40px); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + // 头部容器 + .ant-drawer-header { + background: @glass-header-bg !important; + border-bottom: 1px solid @glass-border !important; + backdrop-filter: blur(16px); + } + + // 头部标题区域 + .ant-drawer-header-title { + flex-direction: row-reverse; // 关闭按钮在右边 + } + + // 关闭按钮 + .ant-drawer-extra { + .anticon-close { + color: @glass-text; + font-size: 18px; + transition: all 0.2s ease; + + &:hover { + color: #fff; + transform: scale(1.1); + } + } + } + + // 内容区域 + .ant-drawer-body { + background: transparent !important; + padding: 0 !important; + + // Chakra Card 样式覆盖 + .chakra-card { + background: @glass-card-bg !important; + border: 1px solid @glass-border !important; + backdrop-filter: blur(8px); + border-radius: 12px; + box-shadow: none !important; + } + + // 折叠区块标题样式覆盖 - 相关股票等标题 + .chakra-heading { + color: @glass-text !important; + } + + // 折叠区块背景 + [class*="chakra-collapse"] > div, + .chakra-card > div > div > div { + background: @glass-section-bg !important; + } + + // Badge 样式 + .chakra-badge { + background: rgba(59, 130, 246, 0.2) !important; + color: #60a5fa !important; + } + + // 所有文本默认颜色 + .chakra-text { + color: @glass-text-secondary; + } + + // 按钮样式 + .chakra-button { + &[data-variant="ghost"] { + color: @glass-text-secondary; + &:hover { + background: rgba(255, 255, 255, 0.06); + color: @glass-text; + } + } + } + + // IconButton 样式 + .chakra-icon-button { + color: @glass-text-secondary; + &:hover { + background: rgba(255, 255, 255, 0.06); + color: @glass-text; + } + } + + // Ant Design Tag 样式 + .ant-tag { + background: rgba(59, 130, 246, 0.15) !important; + border-color: rgba(59, 130, 246, 0.3) !important; + color: #60a5fa !important; + } + } +} + +// 原有基础样式保留（非深色模式） +.event-detail-drawer:not(.event-detail-drawer-dark) { .ant-drawer-title { color: #1A202C; } diff --git a/src/views/Community/components/EventDetailModal/EventDetailModal.tsx b/src/views/Community/components/EventDetailModal/EventDetailModal.tsx index fe1e6b71..50751140 100644 --- a/src/views/Community/components/EventDetailModal/EventDetailModal.tsx +++ b/src/views/Community/components/EventDetailModal/EventDetailModal.tsx @@ -15,8 +15,17 @@ interface EventDetailModalProps { event: any; // TODO: 后续可替换为具体的 Event 类型 } +// 深色毛玻璃主题颜色 +const GLASS_THEME = { + bg: 'rgba(20, 24, 35, 0.92)', + headerBg: 'rgba(26, 31, 46, 0.95)', + borderColor: 'rgba(255, 255, 255, 0.08)', + textColor: '#E8E9ED', + secondaryText: '#A0A4B8', +}; + /** - * 事件详情抽屉组件（从底部弹出） + * 事件详情抽屉组件（从底部弹出）- 深色毛玻璃风格 */ const EventDetailModal: React.FC = ({ open, @@ -34,12 +43,12 @@ const EventDetailModal: React.FC = ({ width={isMobile ? '100%' : '70vw'} title={event?.title || '事件详情'} destroyOnHidden - rootClassName="event-detail-drawer" + rootClassName="event-detail-drawer event-detail-drawer-dark" closeIcon={null} extra={ } styles={{ @@ -47,10 +56,29 @@ const EventDetailModal: React.FC = ({ maxWidth: 1400, margin: '0 auto', borderRadius: '16px 16px 0 0', + overflow: 'hidden', + }, + mask: { + backdropFilter: 'blur(8px)', + background: 'rgba(0, 0, 0, 0.6)', + }, + content: { + borderRadius: '16px 16px 0 0', + background: GLASS_THEME.bg, + backdropFilter: 'blur(20px)', + border: 'none', + boxShadow: '0 -8px 32px rgba(0, 0, 0, 0.4)', + }, + header: { + background: GLASS_THEME.headerBg, + borderBottom: `1px solid ${GLASS_THEME.borderColor}`, + padding: '16px 24px', + backdropFilter: 'blur(12px)', + }, + body: { + padding: 0, + background: 'transparent', }, - content: { borderRadius: '16px 16px 0 0' }, - header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px' }, - body: { padding: 0, background: '#FFFFFF' }, }} > {event && }