更新Company页面的UI为FUI风格
This commit is contained in:
36
app.py
36
app.py
@@ -11216,7 +11216,33 @@ def get_events_by_mainline():
|
||||
else:
|
||||
ungrouped_events.append(event_data)
|
||||
|
||||
# ==================== 5. 整理返回数据 ====================
|
||||
# ==================== 5. 获取 lv2 概念涨跌幅 ====================
|
||||
lv2_price_map = {}
|
||||
try:
|
||||
# 获取所有 lv2 名称
|
||||
lv2_names = [group['lv2_name'] for group in mainline_groups.values() if group.get('lv2_name')]
|
||||
if lv2_names:
|
||||
# 查询 concept_daily_stats 表获取最新涨跌幅
|
||||
price_sql = text('''
|
||||
SELECT concept_name, avg_change_pct, trade_date
|
||||
FROM concept_daily_stats
|
||||
WHERE concept_type = 'lv2'
|
||||
AND concept_name IN :names
|
||||
AND trade_date = (
|
||||
SELECT MAX(trade_date) FROM concept_daily_stats WHERE concept_type = 'lv2'
|
||||
)
|
||||
''')
|
||||
price_result = db.session.execute(price_sql, {'names': tuple(lv2_names)}).fetchall()
|
||||
for row in price_result:
|
||||
lv2_price_map[row.concept_name] = {
|
||||
'avg_change_pct': float(row.avg_change_pct) if row.avg_change_pct else None,
|
||||
'trade_date': str(row.trade_date) if row.trade_date else None
|
||||
}
|
||||
app.logger.info(f'[mainline] 获取 lv2 涨跌幅: {len(lv2_price_map)} 条')
|
||||
except Exception as price_err:
|
||||
app.logger.warning(f'[mainline] 获取 lv2 涨跌幅失败: {price_err}')
|
||||
|
||||
# ==================== 6. 整理返回数据 ====================
|
||||
mainlines = []
|
||||
for lv2_id, group in mainline_groups.items():
|
||||
# 按时间倒序排列（不限制数量）
|
||||
@@ -11226,6 +11252,14 @@ def get_events_by_mainline():
|
||||
reverse=True
|
||||
)
|
||||
group['event_count'] = len(group['events'])
|
||||
# 添加涨跌幅数据
|
||||
lv2_name = group.get('lv2_name', '')
|
||||
if lv2_name in lv2_price_map:
|
||||
group['avg_change_pct'] = lv2_price_map[lv2_name]['avg_change_pct']
|
||||
group['price_date'] = lv2_price_map[lv2_name]['trade_date']
|
||||
else:
|
||||
group['avg_change_pct'] = None
|
||||
group['price_date'] = None
|
||||
mainlines.append(group)
|
||||
|
||||
# 按事件数量排序
|
||||
|
||||
@@ -22,6 +22,7 @@ import {
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Button,
|
||||
SimpleGrid,
|
||||
} from "@chakra-ui/react";
|
||||
import {
|
||||
ChevronDownIcon,
|
||||
@@ -29,7 +30,7 @@ import {
|
||||
RepeatIcon,
|
||||
} from "@chakra-ui/icons";
|
||||
import { FiTrendingUp, FiZap } from "react-icons/fi";
|
||||
import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
|
||||
import MiniEventCard from "../../EventCard/MiniEventCard";
|
||||
import { getApiBase } from "@utils/apiConfig";
|
||||
|
||||
// 固定深色主题颜色
|
||||
@@ -40,8 +41,6 @@ const COLORS = {
|
||||
headerHoverBg: "#2d323e",
|
||||
textColor: "#e2e8f0",
|
||||
secondaryTextColor: "#a0aec0",
|
||||
timelineLineColor: "#4299e1",
|
||||
timelineDotBg: "#63b3ed",
|
||||
scrollbarTrackBg: "#1a1d24",
|
||||
scrollbarThumbBg: "#4a5568",
|
||||
scrollbarThumbHoverBg: "#718096",
|
||||
@@ -49,7 +48,7 @@ const COLORS = {
|
||||
};
|
||||
|
||||
// 每次加载的事件数量
|
||||
const EVENTS_PER_LOAD = 10;
|
||||
const EVENTS_PER_LOAD = 12;
|
||||
|
||||
/**
|
||||
* 单个主线卡片组件 - 支持懒加载
|
||||
@@ -61,9 +60,6 @@ const MainlineCard = React.memo(({
|
||||
onToggle,
|
||||
selectedEvent,
|
||||
onEventSelect,
|
||||
eventFollowStatus,
|
||||
onToggleFollow,
|
||||
borderColor,
|
||||
}) => {
|
||||
// 懒加载状态
|
||||
const [displayCount, setDisplayCount] = useState(EVENTS_PER_LOAD);
|
||||
@@ -85,9 +81,9 @@ const MainlineCard = React.memo(({
|
||||
const hasMore = displayCount < mainline.events.length;
|
||||
|
||||
// 加载更多
|
||||
const loadMore = useCallback(() => {
|
||||
const loadMore = useCallback((e) => {
|
||||
e.stopPropagation();
|
||||
setIsLoadingMore(true);
|
||||
// 使用 setTimeout 模拟异步，避免 UI 卡顿
|
||||
setTimeout(() => {
|
||||
setDisplayCount(prev => Math.min(prev + EVENTS_PER_LOAD, mainline.events.length));
|
||||
setIsLoadingMore(false);
|
||||
@@ -102,8 +98,8 @@ const MainlineCard = React.memo(({
|
||||
borderColor={COLORS.cardBorderColor}
|
||||
borderTopWidth="3px"
|
||||
borderTopColor={`${colorScheme}.500`}
|
||||
minW={isExpanded ? "320px" : "200px"}
|
||||
maxW={isExpanded ? "380px" : "240px"}
|
||||
minW={isExpanded ? "400px" : "200px"}
|
||||
maxW={isExpanded ? "500px" : "240px"}
|
||||
h="100%"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
@@ -149,11 +145,24 @@ const MainlineCard = React.memo(({
|
||||
{mainline.event_count}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
{mainline.lv1_name && (
|
||||
<Text fontSize="xs" color={COLORS.secondaryTextColor} noOfLines={1}>
|
||||
{mainline.lv1_name}
|
||||
</Text>
|
||||
)}
|
||||
{/* 涨跌幅显示 */}
|
||||
{mainline.avg_change_pct != null && (
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
color={mainline.avg_change_pct >= 0 ? "#fc8181" : "#68d391"}
|
||||
>
|
||||
{mainline.avg_change_pct >= 0 ? "+" : ""}
|
||||
{mainline.avg_change_pct.toFixed(2)}%
|
||||
</Text>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
<Icon
|
||||
as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
|
||||
@@ -167,11 +176,10 @@ const MainlineCard = React.memo(({
|
||||
{/* 事件列表区域 */}
|
||||
{isExpanded ? (
|
||||
<Box
|
||||
px={3}
|
||||
px={2}
|
||||
py={2}
|
||||
flex={1}
|
||||
overflowY="auto"
|
||||
position="relative"
|
||||
css={{
|
||||
"&::-webkit-scrollbar": { width: "4px" },
|
||||
"&::-webkit-scrollbar-track": {
|
||||
@@ -183,62 +191,17 @@ const MainlineCard = React.memo(({
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* 时间轴线 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
left="11px"
|
||||
top="8px"
|
||||
bottom="8px"
|
||||
w="2px"
|
||||
bg={COLORS.timelineLineColor}
|
||||
opacity={0.3}
|
||||
borderRadius="full"
|
||||
/>
|
||||
|
||||
{/* 事件列表 */}
|
||||
<VStack spacing={2} align="stretch" pl={5}>
|
||||
{displayedEvents.map((event, eventIndex) => (
|
||||
<Box key={event.id} position="relative">
|
||||
{/* 时间轴圆点 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
left="-19px"
|
||||
top="12px"
|
||||
w="8px"
|
||||
h="8px"
|
||||
borderRadius="full"
|
||||
bg={COLORS.timelineDotBg}
|
||||
border="2px solid"
|
||||
borderColor={COLORS.cardBg}
|
||||
zIndex={1}
|
||||
/>
|
||||
{/* 事件卡片 */}
|
||||
<DynamicNewsEventCard
|
||||
{/* 事件网格 - 2列布局 */}
|
||||
<SimpleGrid columns={2} spacing={2}>
|
||||
{displayedEvents.map((event) => (
|
||||
<MiniEventCard
|
||||
key={event.id}
|
||||
event={event}
|
||||
index={eventIndex}
|
||||
isFollowing={
|
||||
eventFollowStatus[event.id]?.isFollowing || false
|
||||
}
|
||||
followerCount={
|
||||
eventFollowStatus[event.id]?.followerCount ||
|
||||
event.follower_count ||
|
||||
0
|
||||
}
|
||||
isSelected={selectedEvent?.id === event.id}
|
||||
onEventClick={(clickedEvent) => {
|
||||
onEventSelect?.(clickedEvent);
|
||||
}}
|
||||
onTitleClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
onEventSelect?.(event);
|
||||
}}
|
||||
onToggleFollow={() => onToggleFollow?.(event.id)}
|
||||
borderColor={borderColor}
|
||||
compact
|
||||
onEventClick={onEventSelect}
|
||||
/>
|
||||
</Box>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
{/* 加载更多按钮 */}
|
||||
{hasMore && (
|
||||
@@ -250,18 +213,18 @@ const MainlineCard = React.memo(({
|
||||
isLoading={isLoadingMore}
|
||||
loadingText="加载中..."
|
||||
w="100%"
|
||||
mt={2}
|
||||
_hover={{ bg: COLORS.headerHoverBg }}
|
||||
>
|
||||
加载更多 ({mainline.events.length - displayCount} 条)
|
||||
</Button>
|
||||
)}
|
||||
</VStack>
|
||||
</Box>
|
||||
) : (
|
||||
/* 折叠时显示简要信息 */
|
||||
<Box px={3} py={2} flex={1} overflow="hidden">
|
||||
<VStack spacing={1} align="stretch">
|
||||
{mainline.events.slice(0, 3).map((event) => (
|
||||
{mainline.events.slice(0, 4).map((event) => (
|
||||
<Text
|
||||
key={event.id}
|
||||
fontSize="xs"
|
||||
@@ -277,9 +240,9 @@ const MainlineCard = React.memo(({
|
||||
• {event.title}
|
||||
</Text>
|
||||
))}
|
||||
{mainline.events.length > 3 && (
|
||||
{mainline.events.length > 4 && (
|
||||
<Text fontSize="xs" color={COLORS.secondaryTextColor}>
|
||||
... 还有 {mainline.events.length - 3} 条
|
||||
... 还有 {mainline.events.length - 4} 条
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
@@ -428,10 +391,10 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
mainlines: sortedMainlines,
|
||||
});
|
||||
|
||||
// 初始化展开状态（默认全部折叠）
|
||||
// 初始化展开状态（默认全部展开）
|
||||
const initialExpanded = {};
|
||||
sortedMainlines.forEach((mainline) => {
|
||||
initialExpanded[mainline.lv2_id] = false;
|
||||
initialExpanded[mainline.lv2_id] = true;
|
||||
});
|
||||
setExpandedGroups(initialExpanded);
|
||||
} else {
|
||||
@@ -610,7 +573,7 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 主线卡片横向滚动容器 */}
|
||||
{/* 主线卡片横向滚动容器 - 滚动条在顶部 */}
|
||||
<Box
|
||||
overflowX="auto"
|
||||
overflowY="hidden"
|
||||
@@ -627,6 +590,8 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
"&::-webkit-scrollbar-thumb:hover": {
|
||||
background: COLORS.scrollbarThumbHoverBg,
|
||||
},
|
||||
// 滚动条放在顶部
|
||||
transform: "rotateX(180deg)",
|
||||
}}
|
||||
>
|
||||
<HStack
|
||||
@@ -635,6 +600,10 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
align="stretch"
|
||||
h="100%"
|
||||
minW="max-content"
|
||||
css={{
|
||||
// 内容反转回来（因为外层容器旋转了180度）
|
||||
transform: "rotateX(180deg)",
|
||||
}}
|
||||
>
|
||||
{mainlines.map((mainline) => (
|
||||
<MainlineCard
|
||||
@@ -645,9 +614,6 @@ const MainlineTimelineViewComponent = forwardRef(
|
||||
onToggle={() => toggleGroup(mainline.lv2_id)}
|
||||
selectedEvent={selectedEvent}
|
||||
onEventSelect={onEventSelect}
|
||||
eventFollowStatus={eventFollowStatus}
|
||||
onToggleFollow={onToggleFollow}
|
||||
borderColor={borderColor}
|
||||
/>
|
||||
))}
|
||||
</HStack>
|
||||
|
||||
151
src/views/Community/components/EventCard/MiniEventCard.js
Normal file
151
src/views/Community/components/EventCard/MiniEventCard.js
Normal file
@@ -0,0 +1,151 @@
|
||||
// src/views/Community/components/EventCard/MiniEventCard.js
|
||||
// 迷你事件卡片组件 - 用于主线模式的紧凑显示
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Box,
|
||||
Text,
|
||||
HStack,
|
||||
Tooltip,
|
||||
Badge,
|
||||
} from '@chakra-ui/react';
|
||||
import dayjs from 'dayjs';
|
||||
import { getImportanceConfig } from '@constants/importanceLevels';
|
||||
|
||||
// 固定深色主题颜色
|
||||
const COLORS = {
|
||||
cardBg: "#2d323e",
|
||||
cardHoverBg: "#363c4a",
|
||||
cardBorderColor: "#4a5568",
|
||||
textColor: "#e2e8f0",
|
||||
secondaryTextColor: "#a0aec0",
|
||||
linkColor: "#63b3ed",
|
||||
selectedBg: "#2c5282",
|
||||
selectedBorderColor: "#4299e1",
|
||||
};
|
||||
|
||||
/**
|
||||
* 迷你事件卡片组件
|
||||
* 紧凑的卡片式布局，适合在主线模式中横向排列
|
||||
*/
|
||||
const MiniEventCard = React.memo(({
|
||||
event,
|
||||
isSelected = false,
|
||||
onEventClick,
|
||||
}) => {
|
||||
const importance = getImportanceConfig(event.importance);
|
||||
|
||||
// 格式化时间为简短形式
|
||||
const formatTime = (timestamp) => {
|
||||
const date = dayjs(timestamp);
|
||||
const now = dayjs();
|
||||
const diffDays = now.diff(date, 'day');
|
||||
|
||||
if (diffDays === 0) {
|
||||
return date.format('HH:mm');
|
||||
} else if (diffDays === 1) {
|
||||
return '昨天 ' + date.format('HH:mm');
|
||||
} else if (diffDays < 7) {
|
||||
return date.format('MM-DD HH:mm');
|
||||
} else {
|
||||
return date.format('MM-DD');
|
||||
}
|
||||
};
|
||||
|
||||
// 获取涨跌幅显示
|
||||
const getChangeDisplay = () => {
|
||||
const avgChange = event.related_avg_chg;
|
||||
if (avgChange == null || isNaN(Number(avgChange))) {
|
||||
return null;
|
||||
}
|
||||
const numChange = Number(avgChange);
|
||||
const isPositive = numChange > 0;
|
||||
return {
|
||||
value: `${isPositive ? '+' : ''}${numChange.toFixed(1)}%`,
|
||||
color: isPositive ? '#fc8181' : '#68d391',
|
||||
};
|
||||
};
|
||||
|
||||
const changeDisplay = getChangeDisplay();
|
||||
|
||||
return (
|
||||
<Tooltip
|
||||
label={
|
||||
<Box>
|
||||
<Text fontWeight="bold" mb={1}>{event.title}</Text>
|
||||
<Text fontSize="xs" color="gray.300">
|
||||
{dayjs(event.created_at).format('YYYY-MM-DD HH:mm')}
|
||||
</Text>
|
||||
{event.description && (
|
||||
<Text fontSize="xs" mt={1} noOfLines={3}>
|
||||
{event.description}
|
||||
</Text>
|
||||
)}
|
||||
</Box>
|
||||
}
|
||||
placement="top"
|
||||
hasArrow
|
||||
bg="gray.800"
|
||||
color="white"
|
||||
p={3}
|
||||
borderRadius="md"
|
||||
maxW="300px"
|
||||
>
|
||||
<Box
|
||||
bg={isSelected ? COLORS.selectedBg : COLORS.cardBg}
|
||||
borderWidth="1px"
|
||||
borderColor={isSelected ? COLORS.selectedBorderColor : COLORS.cardBorderColor}
|
||||
borderRadius="md"
|
||||
px={2}
|
||||
py={1.5}
|
||||
cursor="pointer"
|
||||
onClick={() => onEventClick?.(event)}
|
||||
_hover={{
|
||||
bg: isSelected ? COLORS.selectedBg : COLORS.cardHoverBg,
|
||||
borderColor: importance.color || COLORS.cardBorderColor,
|
||||
transform: 'translateY(-1px)',
|
||||
}}
|
||||
transition="all 0.15s ease"
|
||||
minW="0"
|
||||
>
|
||||
{/* 第一行：时间 + 涨跌幅 */}
|
||||
<HStack justify="space-between" spacing={1} mb={1}>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={COLORS.secondaryTextColor}
|
||||
flexShrink={0}
|
||||
>
|
||||
{formatTime(event.created_at)}
|
||||
</Text>
|
||||
{changeDisplay && (
|
||||
<Badge
|
||||
fontSize="xs"
|
||||
bg="transparent"
|
||||
color={changeDisplay.color}
|
||||
fontWeight="bold"
|
||||
px={0}
|
||||
>
|
||||
{changeDisplay.value}
|
||||
</Badge>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{/* 第二行：标题 */}
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={COLORS.linkColor}
|
||||
fontWeight="medium"
|
||||
noOfLines={2}
|
||||
lineHeight="1.3"
|
||||
_hover={{ textDecoration: 'underline' }}
|
||||
>
|
||||
{event.title}
|
||||
</Text>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
);
|
||||
});
|
||||
|
||||
MiniEventCard.displayName = 'MiniEventCard';
|
||||
|
||||
export default MiniEventCard;
|
||||
Reference in New Issue
Block a user