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

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-14 08:09:18 +08:00
parent 98d063bcfe
commit ad8ff50001
3 changed files with 59 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,6 +21,7 @@ import MiniKLineChart from './MiniKLineChart';
import StockChartModal from '../../../../components/StockChart/StockChartModal'; import StockChartModal from '../../../../components/StockChart/StockChartModal';
import CitedContent from '../../../../components/Citation/CitedContent'; import CitedContent from '../../../../components/Citation/CitedContent';
import { getChangeColor } from '../../../../utils/colorUtils'; import { getChangeColor } from '../../../../utils/colorUtils';
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
/** /**
* 股票卡片组件 * 股票卡片组件
@@ -42,12 +43,12 @@ const StockListItem = ({
isInWatchlist = false, isInWatchlist = false,
onWatchlistToggle onWatchlistToggle
}) => { }) => {
const cardBg = useColorModeValue('white', 'gray.800'); const cardBg = PROFESSIONAL_COLORS.background.card;
const borderColor = useColorModeValue('gray.200', 'gray.700'); const borderColor = PROFESSIONAL_COLORS.border.default;
const codeColor = useColorModeValue('blue.600', 'blue.300'); const codeColor = '#3B82F6';
const nameColor = useColorModeValue('gray.700', 'gray.300'); const nameColor = PROFESSIONAL_COLORS.text.primary;
const descColor = useColorModeValue('gray.600', 'gray.400'); const descColor = PROFESSIONAL_COLORS.text.secondary;
const dividerColor = useColorModeValue('gray.200', 'gray.600'); const dividerColor = PROFESSIONAL_COLORS.border.default;
const [isDescExpanded, setIsDescExpanded] = useState(false); const [isDescExpanded, setIsDescExpanded] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
@@ -195,11 +196,11 @@ const StockListItem = ({
<VStack <VStack
w="115px" w="115px"
borderWidth="1px" borderWidth="1px"
borderColor={useColorModeValue('blue.100', 'blue.700')} borderColor="rgba(59, 130, 246, 0.3)"
borderRadius="md" borderRadius="md"
px={1.5} px={1.5}
py={1} py={1}
bg={useColorModeValue('blue.50', 'blue.900')} bg="rgba(59, 130, 246, 0.1)"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setIsModalOpen(true); setIsModalOpen(true);
@@ -210,15 +211,15 @@ const StockListItem = ({
spacing={0} spacing={0}
h="fit-content" h="fit-content"
_hover={{ _hover={{
borderColor: useColorModeValue('blue.300', 'blue.500'), borderColor: '#3B82F6',
boxShadow: 'md', boxShadow: '0 0 10px rgba(59, 130, 246, 0.3)',
transform: 'translateY(-1px)' transform: 'translateY(-1px)'
}} }}
transition="all 0.2s" transition="all 0.2s"
> >
<Text <Text
fontSize="10px" fontSize="10px"
color={useColorModeValue('blue.700', 'blue.200')} color="#3B82F6"
fontWeight="semibold" fontWeight="semibold"
whiteSpace="nowrap" whiteSpace="nowrap"
mb={0.5} mb={0.5}
@@ -237,11 +238,11 @@ const StockListItem = ({
<VStack <VStack
w="115px" w="115px"
borderWidth="1px" borderWidth="1px"
borderColor={useColorModeValue('purple.100', 'purple.700')} borderColor="rgba(168, 85, 247, 0.3)"
borderRadius="md" borderRadius="md"
px={1.5} px={1.5}
py={1} py={1}
bg={useColorModeValue('purple.50', 'purple.900')} bg="rgba(168, 85, 247, 0.1)"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
setIsModalOpen(true); setIsModalOpen(true);
@@ -252,15 +253,15 @@ const StockListItem = ({
spacing={0} spacing={0}
h="fit-content" h="fit-content"
_hover={{ _hover={{
borderColor: useColorModeValue('purple.300', 'purple.500'), borderColor: '#A855F7',
boxShadow: 'md', boxShadow: '0 0 10px rgba(168, 85, 247, 0.3)',
transform: 'translateY(-1px)' transform: 'translateY(-1px)'
}} }}
transition="all 0.2s" transition="all 0.2s"
> >
<Text <Text
fontSize="10px" fontSize="10px"
color={useColorModeValue('purple.700', 'purple.200')} color="#A855F7"
fontWeight="semibold" fontWeight="semibold"
whiteSpace="nowrap" whiteSpace="nowrap"
mb={0.5} mb={0.5}
@@ -285,8 +286,8 @@ const StockListItem = ({
label={isDescExpanded ? "点击收起" : "点击展开完整描述"} label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
placement="top" placement="top"
hasArrow hasArrow
bg="gray.600" bg="rgba(20, 20, 20, 0.95)"
color="white" color={PROFESSIONAL_COLORS.gold[500]}
fontSize="xs" fontSize="xs"
> >
<Box <Box
@@ -297,10 +298,10 @@ const StockListItem = ({
cursor="pointer" cursor="pointer"
px={3} px={3}
py={2} py={2}
bg={useColorModeValue('gray.50', 'gray.700')} bg={PROFESSIONAL_COLORS.background.secondary}
borderRadius="md" borderRadius="md"
_hover={{ _hover={{
bg: useColorModeValue('gray.100', 'gray.600'), bg: PROFESSIONAL_COLORS.background.cardHover,
}} }}
transition="background 0.2s" transition="background 0.2s"
position="relative" position="relative"
@@ -325,8 +326,8 @@ const StockListItem = ({
label={isDescExpanded ? "点击收起" : "点击展开完整描述"} label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
placement="top" placement="top"
hasArrow hasArrow
bg="gray.600" bg="rgba(20, 20, 20, 0.95)"
color="white" color={PROFESSIONAL_COLORS.gold[500]}
fontSize="xs" fontSize="xs"
> >
<Box <Box
@@ -337,10 +338,10 @@ const StockListItem = ({
cursor="pointer" cursor="pointer"
px={3} px={3}
py={2} py={2}
bg={useColorModeValue('gray.50', 'gray.700')} bg={PROFESSIONAL_COLORS.background.secondary}
borderRadius="md" borderRadius="md"
_hover={{ _hover={{
bg: useColorModeValue('gray.100', 'gray.600'), bg: PROFESSIONAL_COLORS.background.cardHover,
}} }}
transition="background 0.2s" transition="background 0.2s"
position="relative" position="relative"

9
src/views/EventDetail/components/HistoricalEvents.js
View File

@@ -32,6 +32,7 @@ import {
import { stockService } from '../../../services/eventService'; import { stockService } from '../../../services/eventService';
import { logger } from '../../../utils/logger'; import { logger } from '../../../utils/logger';
import CitedContent from '../../../components/Citation/CitedContent'; import CitedContent from '../../../components/Citation/CitedContent';
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
const HistoricalEvents = ({ const HistoricalEvents = ({
events = [], events = [],
@@ -48,10 +49,10 @@ const HistoricalEvents = ({
const [loadingStocks, setLoadingStocks] = useState({}); const [loadingStocks, setLoadingStocks] = useState({});
// 颜色主题 // 颜色主题
const cardBg = useColorModeValue('white', 'gray.800'); const cardBg = PROFESSIONAL_COLORS.background.card;
const borderColor = useColorModeValue('gray.200', 'gray.600'); const borderColor = PROFESSIONAL_COLORS.border.default;
const textSecondary = useColorModeValue('gray.600', 'gray.400'); const textSecondary = PROFESSIONAL_COLORS.text.secondary;
const nameColor = useColorModeValue('gray.700', 'gray.300'); const nameColor = PROFESSIONAL_COLORS.text.primary;
// 字段兼容函数 // 字段兼容函数
const getEventDate = (event) => { const getEventDate = (event) => {

39
src/views/EventDetail/components/RelatedConcepts.js
View File

@@ -33,14 +33,15 @@ import { FaEye, FaExternalLinkAlt, FaChartLine, FaCalendarAlt } from 'react-icon
import moment from 'moment'; import moment from 'moment';
import tradingDayUtils from '../../../utils/tradingDayUtils'; // 引入交易日工具 import tradingDayUtils from '../../../utils/tradingDayUtils'; // 引入交易日工具
import { logger } from '../../../utils/logger'; import { logger } from '../../../utils/logger';
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme';
// 增强版 ConceptCard 组件 - 展示更多数据细节 // 增强版 ConceptCard 组件 - 展示更多数据细节
const ConceptCard = ({ concept, tradingDate, onViewDetails }) => { const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
const [isExpanded, setIsExpanded] = useState(false); const [isExpanded, setIsExpanded] = useState(false);
const cardBg = useColorModeValue('white', 'gray.800'); const cardBg = PROFESSIONAL_COLORS.background.card;
const borderColor = useColorModeValue('gray.200', 'gray.600'); const borderColor = PROFESSIONAL_COLORS.border.default;
const textColor = useColorModeValue('gray.600', 'gray.400'); const textColor = PROFESSIONAL_COLORS.text.secondary;
const highlightBg = useColorModeValue('yellow.50', 'yellow.900'); const highlightBg = 'rgba(255, 195, 0, 0.1)';
// 计算涨跌幅颜色和符号 // 计算涨跌幅颜色和符号
const changeColor = concept.price_info?.avg_change_pct > 0 ? 'red' : 'green'; const changeColor = concept.price_info?.avg_change_pct > 0 ? 'red' : 'green';
@@ -69,8 +70,8 @@ const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
borderWidth={2} borderWidth={2}
_hover={{ _hover={{
transform: 'translateY(-2px)', transform: 'translateY(-2px)',
shadow: 'xl', boxShadow: '0 8px 20px rgba(0, 0, 0, 0.4)',
borderColor: 'blue.400' borderColor: '#3B82F6'
}} }}
transition="all 0.3s" transition="all 0.3s"
> >
@@ -80,17 +81,35 @@ const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
<Box> <Box>
<HStack justify="space-between" align="flex-start" mb={2}> <HStack justify="space-between" align="flex-start" mb={2}>
<VStack align="start" spacing={1} flex={1}> <VStack align="start" spacing={1} flex={1}>
<Text fontSize="lg" fontWeight="bold" color="blue.600"> <Text fontSize="lg" fontWeight="bold" color="#3B82F6">
{concept.concept} {concept.concept}
</Text> </Text>
<HStack spacing={2} flexWrap="wrap"> <HStack spacing={2} flexWrap="wrap">
<Badge colorScheme="purple" fontSize="xs"> <Badge
bg="rgba(168, 85, 247, 0.15)"
color="#A855F7"
borderWidth="1px"
borderColor="#A855F7"
fontSize="xs"
>
相关度: {concept.score.toFixed(2)} 相关度: {concept.score.toFixed(2)}
</Badge> </Badge>
<Badge colorScheme="teal" fontSize="xs"> <Badge
bg="rgba(20, 184, 166, 0.15)"
color="#14B8A6"
borderWidth="1px"
borderColor="#14B8A6"
fontSize="xs"
>
{getMatchTypeName(concept.match_type)} {getMatchTypeName(concept.match_type)}
</Badge> </Badge>
<Badge colorScheme="orange" fontSize="xs"> <Badge
bg="rgba(251, 146, 60, 0.15)"
color="#FB923C"
borderWidth="1px"
borderColor="#FB923C"
fontSize="xs"
>
{concept.stock_count} 只股票 {concept.stock_count} 只股票
</Badge> </Badge>
</HStack> </HStack>