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

Merge branch 'feature_2025/251121_h5UI' into feature_2025/251117_pref

Browse Source 
* feature_2025/251121_h5UI:
  feat: 传导练UI调整
  fix: UI调试
  fix: 调整相关概念卡片UI
  fix: 文案调整
  fix: AI合成h5换行，pc一行，评论标题上方margin去掉
  fix: 调整AI合成UI
  fix: 分时图UI调整
  fix：事件详情弹窗UI
  fix:调整客服UI
  fix: 事件详情弹窗UI调整
  fix: 事件详情弹窗UI调整 重要性h5不展示 事件列表卡片间距调整
  fix: h5 去掉通知弹窗引导
  fix: 关注按钮UI调整
This commit is contained in:
zdl
2025-11-28 07:15:11 +08:00
parent 900aff17df cf4fdf6a68
commit b88bfebcef
18 changed files with 497 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/Community/components/DynamicNewsCard.js
View File

@@ -543,7 +543,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
<Flex justify="space-between" align="center">
{/* 左侧：标题 + 模式切换按钮 */}
<HStack spacing={4}>
<Heading size="md" color={PROFESSIONAL_COLORS.text.primary}>
<Heading size={isMobile ? "sm" : "md"} color={PROFESSIONAL_COLORS.text.primary}>
<HStack spacing={2}>
<TimeIcon color={PROFESSIONAL_COLORS.gold[500]} />
<Text bgGradient={PROFESSIONAL_COLORS.gradients.gold} bgClip="text">实时要闻·动态追踪</Text>
@@ -610,7 +610,9 @@ const [currentMode, setCurrentMode] = useState('vertical');
<CardBody
ref={cardBodyRef}
position="relative"
pt={4}
pt={0}
px={0}
mx={0}
display="flex"
flexDirection="column"
overflow="visible"

27
src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
View File

@@ -9,18 +9,12 @@ import {
Center,
Text,
useBreakpointValue,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
useDisclosure
} from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
import EventDetailScrollPanel from './EventDetailScrollPanel';
import DynamicNewsDetailPanel from '../DynamicNewsDetail/DynamicNewsDetailPanel';
import EventDetailModal from '../EventDetailModal';
/**
* 纵向分栏模式布局
@@ -165,20 +159,11 @@ const VerticalModeLayout = React.memo(({
{/* 移动端详情弹窗 */}
{isMobile && (
<Modal isOpen={isMobileModalOpen} onClose={onMobileModalClose} size="full" scrollBehavior="inside">
<ModalOverlay bg="blackAlpha.800" backdropFilter="blur(10px)" />
<ModalContent maxW="100vw" m={0} borderRadius={0}>
<ModalHeader bg="gray.900" color="white" borderBottom="1px solid" borderColor="gray.700">
{mobileSelectedEvent?.title || '事件详情'}
</ModalHeader>
<ModalCloseButton color="white" />
<ModalBody p={0} bg="gray.900">
{mobileSelectedEvent && (
<DynamicNewsDetailPanel event={mobileSelectedEvent} showHeader={false} />
)}
</ModalBody>
</ModalContent>
</Modal>
<EventDetailModal
open={isMobileModalOpen}
onClose={onMobileModalClose}
event={mobileSelectedEvent}
/>
)}
</Flex>
);

4
src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js
View File

@@ -47,7 +47,7 @@ const CompactMetaBar = ({ event, importance, isFollowing, followerCount, onToggl
spacing={3}
zIndex={1}
>
{/* 重要性徽章 - 与 EventHeaderInfo 样式一致，尺寸略小 */}
{/* 重要性徽章 - 与 EventHeaderInfo 样式一致，尺寸略小 - H5 隐藏 */}
<Badge
px={3}
py={1.5}
@@ -62,7 +62,7 @@ const CompactMetaBar = ({ event, importance, isFollowing, followerCount, onToggl
}
color="white"
boxShadow="lg"
display="flex"
display={{ base: 'none', lg: 'flex' }}
alignItems="center"
gap={1}
>

23
src/views/Community/components/DynamicNewsDetail/CompactStockItem.js
View File

@@ -2,13 +2,15 @@
// 精简模式股票卡片组件（浮动卡片样式）
import React from 'react';
import { useSelector } from 'react-redux';
import {
Box,
Text,
Tooltip,
useColorModeValue,
} from '@chakra-ui/react';
import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } from '../../../../utils/colorUtils';
import { selectIsMobile } from '@store/slices/deviceSlice';
import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } from '@utils/colorUtils';
/**
* 精简模式股票卡片组件
@@ -17,6 +19,7 @@ import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } fro
* @param {Object} props.quote - 股票行情数据（可选）
*/
const CompactStockItem = ({ stock, quote = null }) => {
const isMobile = useSelector(selectIsMobile);
const nameColor = useColorModeValue('gray.700', 'gray.300');
const handleViewDetail = () => {
@@ -45,10 +48,10 @@ const CompactStockItem = ({ stock, quote = null }) => {
>
<Box
bgGradient={getChangeBackgroundGradient(change)}
borderWidth="3px"
borderWidth="1px"
borderColor={getChangeBorderColor(change)}
borderRadius="2xl"
p={4}
borderRadius="xl"
p={2}
onClick={handleViewDetail}
cursor="pointer"
boxShadow="lg"
@@ -69,14 +72,14 @@ const CompactStockItem = ({ stock, quote = null }) => {
}}
transition="all 0.3s ease-in-out"
display="inline-block"
minW="150px"
minW="100px"
>
{/* 股票代码 */}
<Text
fontSize="md"
fontSize={isMobile ? "sm" : "md"}
fontWeight="bold"
color={getChangeColor(change)}
mb={2}
mb={isMobile ? 1 : 2}
textAlign="center"
>
{stock.stock_code}
@@ -84,7 +87,7 @@ const CompactStockItem = ({ stock, quote = null }) => {
{/* 涨跌幅 - 超大号显示 */}
<Text
fontSize="3xl"
fontSize={isMobile ? "xl" : "3xl"}
fontWeight="black"
color={getChangeColor(change)}
textAlign="center"
@@ -96,9 +99,9 @@ const CompactStockItem = ({ stock, quote = null }) => {
{/* 股票名称（小字） */}
<Text
fontSize="xs"
fontSize={isMobile ? "2xs" : "xs"}
color={nameColor}
mt={2}
mt={isMobile ? 1 : 2}
textAlign="center"
noOfLines={1}
fontWeight="medium"

2
src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js
View File

@@ -418,7 +418,7 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
</CollapsibleSection>
{/* 讨论区（评论区） - 所有登录用户可用 */}
<Box mt={4}>
<Box>
<EventCommentSection eventId={event.id} />
</Box>
</VStack>

18
src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/SimpleConceptCard.js
View File

@@ -37,16 +37,16 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
return (
<VStack
align="stretch"
spacing={2}
spacing={1}
bg={cardBg}
borderWidth="1px"
borderColor={borderColor}
borderRadius="md"
px={4}
py={2}
px={2}
py={1}
cursor="pointer"
transition="all 0.2s"
minW="200px"
minW="100px"
_hover={{
transform: 'translateY(-1px)',
boxShadow: 'md',
@@ -68,17 +68,17 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
</Text>
{/* 第二行：相关度 + 涨跌幅 */}
<Flex justify="space-between" align="center" gap={2} flexWrap="wrap">
<Flex justify="space-between" align="center" gap={1} flexWrap="wrap">
{/* 相关度标签 */}
<Box
bg={relevanceColors.bg}
color={relevanceColors.color}
px={2}
px={1.5}
py={0.5}
borderRadius="sm"
flexShrink={0}
>
<Text fontSize="xs" fontWeight="medium" whiteSpace="nowrap">
<Text fontSize="10px" fontWeight="medium" whiteSpace="nowrap">
相关度: {relevanceScore}%
</Text>
</Box>
@@ -87,8 +87,8 @@ const SimpleConceptCard = ({ concept, onClick, getRelevanceColor }) => {
{changePct !== null && (
<Badge
colorScheme={changeColor}
fontSize="xs"
px={2}
fontSize="10px"
px={1.5}
py={0.5}
flexShrink={0}
>

2
src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js
View File

@@ -243,7 +243,7 @@ const RelatedConceptsSection = ({
}
}}
>
{isExpanded ? '收起' : '查看详细描述'}
{isExpanded ? '收起' : '查看详细'}
</Button>
</Flex>
{/* 第二行：交易日期信息 */}

88
src/views/Community/components/DynamicNewsDetail/StockListItem.js
View File

@@ -2,6 +2,7 @@
// 股票卡片组件（融合表格功能的卡片样式）
import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import {
Box,
Flex,
@@ -16,13 +17,15 @@ import {
useColorModeValue,
} from '@chakra-ui/react';
import { StarIcon } from '@chakra-ui/icons';
import { Tag } from 'antd';
import { RobotOutlined } from '@ant-design/icons';
import { selectIsMobile } from '@store/slices/deviceSlice';
import MiniTimelineChart from '../StockDetailPanel/components/MiniTimelineChart';
import MiniKLineChart from './MiniKLineChart';
import TimelineChartModal from '../../../../components/StockChart/TimelineChartModal';
import KLineChartModal from '../../../../components/StockChart/KLineChartModal';
import CitedContent from '../../../../components/Citation/CitedContent';
import { getChangeColor } from '../../../../utils/colorUtils';
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
import TimelineChartModal from '@components/StockChart/TimelineChartModal';
import KLineChartModal from '@components/StockChart/KLineChartModal';
import { getChangeColor } from '@utils/colorUtils';
import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
/**
* 股票卡片组件
@@ -44,6 +47,7 @@ const StockListItem = ({
isInWatchlist = false,
onWatchlistToggle
}) => {
const isMobile = useSelector(selectIsMobile);
const cardBg = PROFESSIONAL_COLORS.background.card;
const borderColor = PROFESSIONAL_COLORS.border.default;
const codeColor = '#3B82F6';
@@ -128,9 +132,9 @@ const StockListItem = ({
transition="all 0.2s"
>
{/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
<HStack spacing={2} align="center" flexWrap="wrap">
<HStack spacing={2} align="center" flexWrap={isMobile ? 'wrap' : 'nowrap'}>
{/* 左侧：股票信息区 */}
<HStack spacing={2} minW="360px" maxW="380px" flexShrink={0}>
<HStack spacing={2} overflow="hidden">
{/* 股票代码 + 名称 + 涨跌幅 */}
<VStack
align="stretch"
@@ -194,24 +198,24 @@ const StockListItem = ({
</HStack>
</VStack>
{/* 分时图 - 更紧凑 */}
{/* 分时图 - 自适应 */}
<VStack
w="115px"
flex={1}
minW="80px"
maxW="150px"
borderWidth="1px"
borderColor="rgba(59, 130, 246, 0.3)"
borderRadius="md"
px={1.5}
py={1}
px={2}
py={1.5}
bg="rgba(59, 130, 246, 0.1)"
onClick={(e) => {
e.stopPropagation();
setIsTimelineModalOpen(true);
}}
cursor="pointer"
flexShrink={0}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: '#3B82F6',
boxShadow: '0 0 10px rgba(59, 130, 246, 0.3)',
@@ -228,7 +232,7 @@ const StockListItem = ({
>
📈 分时
</Text>
<Box h="32px">
<Box h="28px">
<MiniTimelineChart
stockCode={stock.stock_code}
eventTime={eventTime}
@@ -236,24 +240,24 @@ const StockListItem = ({
</Box>
</VStack>
{/* K线图 - 更紧凑 */}
{/* K线图 - 自适应 */}
<VStack
w="115px"
flex={1}
minW="80px"
maxW="150px"
borderWidth="1px"
borderColor="rgba(168, 85, 247, 0.3)"
borderRadius="md"
px={1.5}
py={1}
px={2}
py={1.5}
bg="rgba(168, 85, 247, 0.1)"
onClick={(e) => {
e.stopPropagation();
setIsKLineModalOpen(true);
}}
cursor="pointer"
flexShrink={0}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: '#A855F7',
boxShadow: '0 0 10px rgba(168, 85, 247, 0.3)',
@@ -270,7 +274,7 @@ const StockListItem = ({
>
📊 日线
</Text>
<Box h="32px">
<Box h="28px">
<MiniKLineChart
stockCode={stock.stock_code}
eventTime={eventTime}
@@ -281,7 +285,7 @@ const StockListItem = ({
{/* 关联描述 - 升级和降级处理 */}
{stock.relation_desc && (
<Box flex={1} minW={0}>
<Box flex={1} minW={0} flexBasis={isMobile ? '100%' : ''}>
{stock.relation_desc?.data ? (
// 升级：带引用来源的版本 - 添加折叠功能
<Tooltip
@@ -298,8 +302,6 @@ const StockListItem = ({
setIsDescExpanded(!isDescExpanded);
}}
cursor="pointer"
px={3}
py={2}
bg={PROFESSIONAL_COLORS.background.secondary}
borderRadius="md"
_hover={{
@@ -308,18 +310,30 @@ const StockListItem = ({
transition="background 0.2s"
position="relative"
>
<Collapse in={isDescExpanded} startingHeight={40}>
<CitedContent
data={stock.relation_desc}
title=""
showAIBadge={true}
textColor={PROFESSIONAL_COLORS.text.primary}
containerStyle={{
backgroundColor: 'transparent',
borderRadius: '0',
padding: '0',
<Collapse in={isDescExpanded} startingHeight={56}>
{/* AI 标识 - 行内显示在文字前面 */}
<Tag
icon={<RobotOutlined />}
color="purple"
style={{
fontSize: 12,
padding: '2px 8px',
marginRight: 8,
verticalAlign: 'middle',
display: 'inline-flex',
}}
/>
>
AI合成
</Tag>
{/* 直接渲染文字内容 */}
<Text
as="span"
fontSize="sm"
color={PROFESSIONAL_COLORS.text.primary}
lineHeight="1.8"
>
{stock.relation_desc?.data?.map(item => item.sentences || item.query_part).filter(Boolean).join('，')}
</Text>
</Collapse>
</Box>
</Tooltip>
@@ -339,8 +353,6 @@ const StockListItem = ({
setIsDescExpanded(!isDescExpanded);
}}
cursor="pointer"
px={3}
py={2}
bg={PROFESSIONAL_COLORS.background.secondary}
borderRadius="md"
_hover={{
@@ -350,7 +362,7 @@ const StockListItem = ({
position="relative"
>
{/* 去掉"关联描述"标题 */}
<Collapse in={isDescExpanded} startingHeight={36}>
<Collapse in={isDescExpanded} startingHeight={56}>
<Text
fontSize="xs"
color={nameColor}

7
src/views/Community/components/EventCard/EventFollowButton.js
View File

@@ -32,10 +32,10 @@ const EventFollowButton = ({
size={size}
colorScheme="yellow"
variant="ghost"
bg="whiteAlpha.500"
bg="rgba(113, 128, 150, 0.6)"
boxShadow="sm"
_hover={{
bg: 'whiteAlpha.800',
bg: 'rgba(113, 128, 150, 0.8)',
boxShadow: 'md'
}}
icon={
@@ -47,8 +47,7 @@ const EventFollowButton = ({
) : (
<AiOutlineStar
size={iconSize}
color="#718096"
strokeWidth="1"
color="gold"
/>
)
}

36
src/views/Community/components/EventDetailModal.less Normal file
View File

@@ -0,0 +1,36 @@
.event-detail-modal {
top: 20% !important;
margin: 0 auto !important;
padding-bottom: 0 !important;
.ant-modal-content {
border-radius: 24px !important;
background: transparent;
}
// 标题样式 - 深色文字（白色背景）
.ant-modal-title {
color: #1A202C;
}
// 关闭按钮样式 - 深色（白色背景）
.ant-modal-close {
color: #4A5568;
&:hover {
color: #1A202C;
}
}
}
// 自底向上滑入动画
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

48
src/views/Community/components/EventDetailModal.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React from 'react';
import { useSelector } from 'react-redux';
import { Modal } from 'antd';
import { selectIsMobile } from '@store/slices/deviceSlice';
import DynamicNewsDetailPanel from './DynamicNewsDetail/DynamicNewsDetailPanel';
import './EventDetailModal.less';
interface EventDetailModalProps {
/** 是否打开弹窗 */
open: boolean;
/** 关闭弹窗回调 */
onClose: () => void;
/** 事件对象 */
event: any; // TODO: 后续可替换为具体的 Event 类型
}
/**
* 事件详情弹窗组件
*/
const EventDetailModal: React.FC<EventDetailModalProps> = ({
open,
onClose,
event,
}) => {
const isMobile = useSelector(selectIsMobile);
return (
<Modal
open={open}
onCancel={onClose}
footer={null}
title={event?.title || '事件详情'}
width='100vw'
destroyOnClose
className="event-detail-modal"
styles={{
mask: { background: 'transparent' },
content: { borderRadius: 24, padding: 0, maxWidth: 1400, background: 'transparent', margin: '0 auto' },
header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px', borderRadius: '24px 24px 0 0', margin: 0 },
body: { padding: 0 },
}}
>
{event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
</Modal>
);
};
export default EventDetailModal;

33
src/views/Community/components/HotEvents.js
View File

@@ -2,19 +2,11 @@
import React, { useState } from 'react';
import { Card, Badge, Tag, Empty, Carousel, Tooltip } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalBody,
ModalCloseButton,
useDisclosure
} from '@chakra-ui/react';
import { useDisclosure } from '@chakra-ui/react';
import EventDetailModal from './EventDetailModal';
import dayjs from 'dayjs';
import './HotEvents.css';
import defaultEventImage from '../../../assets/img/default-event.jpg';
import DynamicNewsDetailPanel from './DynamicNewsDetail';
// 自定义箭头组件
const CustomArrow = ({ className, style, onClick, direction }) => {
@@ -196,21 +188,12 @@ const HotEvents = ({ events, onPageChange, onEventClick }) => {
</Card>
)}
{/* 事件详情弹窗 - 使用 Chakra UI Modal（与平铺模式一致） */}
{isModalOpen ? (
<Modal isOpen={isModalOpen} onClose={onModalClose} size="6xl" scrollBehavior="inside">
<ModalOverlay />
<ModalContent>
<ModalHeader>
{modalEvent?.title || '事件详情'}
</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
{modalEvent && <DynamicNewsDetailPanel event={modalEvent} />}
</ModalBody>
</ModalContent>
</Modal>
): null}
{/* 事件详情弹窗 */}
<EventDetailModal
open={isModalOpen}
onClose={onModalClose}
event={modalEvent}
/>
</div>
);
};