From adc802da943d921034bcddcc85b8032951a96331 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 24 Dec 2025 13:16:29 +0800 Subject: [PATCH 1/2] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E8=B5=84?= =?UTF-8?q?=E4=BA=A7=E9=85=8D=E7=BD=AE=E6=A8=A1=E5=9D=97=E9=AB=98=E5=BA=A6?= =?UTF-8?q?=EF=BC=8C=E4=BD=BF=E5=B8=83=E5=B1=80=E6=9B=B4=E7=B4=A7=E5=87=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 图表高度从 280px 降低到 200px - 调整圆环大小和位置使其在较小空间内显示更协调 - 减少 CardBody 和详细配置信息的间距 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../TradingSimulation/components/AccountOverview.js | 8 ++++---- .../components/AssetAllocationChart.tsx | 10 +++++----- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/views/TradingSimulation/components/AccountOverview.js b/src/views/TradingSimulation/components/AccountOverview.js index 00b39307..15c7157b 100644 --- a/src/views/TradingSimulation/components/AccountOverview.js +++ b/src/views/TradingSimulation/components/AccountOverview.js @@ -267,15 +267,15 @@ export default function AccountOverview({ account, tradingEvents }) { - + - + {/* 详细配置信息 */} - + diff --git a/src/views/TradingSimulation/components/AssetAllocationChart.tsx b/src/views/TradingSimulation/components/AssetAllocationChart.tsx index 9c32c1fa..3b31b394 100644 --- a/src/views/TradingSimulation/components/AssetAllocationChart.tsx +++ b/src/views/TradingSimulation/components/AssetAllocationChart.tsx @@ -15,12 +15,12 @@ interface AssetAllocationChartProps { * 资产配置环形图 * @param cashAmount - 现金资产金额 * @param stockAmount - 股票资产金额 - * @param height - 图表高度，默认 280px + * @param height - 图表高度，默认 200px */ export const AssetAllocationChart = ({ cashAmount, stockAmount, - height = 280 + height = 200 }: AssetAllocationChartProps) => { const total = cashAmount + stockAmount; @@ -48,7 +48,7 @@ export const AssetAllocationChart = ({ }, legend: { orient: 'horizontal', - bottom: 10, + bottom: 0, left: 'center', textStyle: { color: '#666', @@ -62,8 +62,8 @@ export const AssetAllocationChart = ({ { name: '资产配置', type: 'pie', - radius: ['45%', '70%'], - center: ['50%', '45%'], + radius: ['40%', '65%'], + center: ['50%', '42%'], avoidLabelOverlap: true, itemStyle: { borderRadius: 4, From 48c9210cf8901495d413eac59ad6fd33d8955c61 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 24 Dec 2025 13:49:23 +0800 Subject: [PATCH 2/2] =?UTF-8?q?refactor(Center):=20=E9=87=8D=E6=9E=84=20Fe?= =?UTF-8?q?atureEntryPanel=20=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将 FeatureEntryPanel 重构为目录结构，提取 FeatureCardItem 子组件 - 使用 GlassCard 容器，标题栏样式与投资仪表盘保持一致 - 调整组件顺序：核心功能入口移至价值论坛下方 - 功能卡片采用水平布局，圆形渐变图标 + 标题描述 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../FeatureEntryPanel/FeatureCardItem.tsx | 81 +++++++++++++++++++ .../components/FeatureEntryPanel/index.tsx | 73 +++++++++++++++++ src/views/Center/index.tsx | 6 ++ 3 files changed, 160 insertions(+) create mode 100644 src/views/Center/components/FeatureEntryPanel/FeatureCardItem.tsx create mode 100644 src/views/Center/components/FeatureEntryPanel/index.tsx diff --git a/src/views/Center/components/FeatureEntryPanel/FeatureCardItem.tsx b/src/views/Center/components/FeatureEntryPanel/FeatureCardItem.tsx new file mode 100644 index 00000000..a72603bc --- /dev/null +++ b/src/views/Center/components/FeatureEntryPanel/FeatureCardItem.tsx @@ -0,0 +1,81 @@ +/** + * FeatureCardItem - 功能卡片项组件 + * 用于展示单个功能入口，包含图标、标题和描述 + */ +import React from 'react'; +import { Box, Flex, VStack, Text } from '@chakra-ui/react'; +import type { Feature } from '@/types/home'; + +/** 获取图标背景渐变色 */ +const getIconBgGradient = (color: string): string => { + const gradients: Record = { + yellow: 'linear-gradient(135deg, #F6AD55 0%, #ED8936 100%)', + purple: 'linear-gradient(135deg, #B794F4 0%, #805AD5 100%)', + blue: 'linear-gradient(135deg, #63B3ED 0%, #3182CE 100%)', + green: 'linear-gradient(135deg, #68D391 0%, #38A169 100%)', + orange: 'linear-gradient(135deg, #FBD38D 0%, #DD6B20 100%)', + teal: 'linear-gradient(135deg, #4FD1C5 0%, #319795 100%)', + cyan: 'linear-gradient(135deg, #76E4F7 0%, #00B5D8 100%)', + red: 'linear-gradient(135deg, #FC8181 0%, #E53E3E 100%)' + }; + return gradients[color] || gradients.blue; +}; + +export interface FeatureCardItemProps { + feature: Feature; + onClick: (feature: Feature) => void; +} + +const FeatureCardItem: React.FC = ({ feature, onClick }) => { + return ( + onClick(feature)} + _hover={{ + bg: 'whiteAlpha.100', + transform: 'translateY(-2px)', + boxShadow: 'lg' + }} + transition="all 0.2s ease" + align="center" + gap={3} + border="1px solid" + borderColor="whiteAlpha.100" + > + {/* 左侧图标 */} + + {feature.icon} + + + {/* 右侧文字 */} + + + {feature.title} + + + {feature.description} + + + + ); +}; + +export default FeatureCardItem; diff --git a/src/views/Center/components/FeatureEntryPanel/index.tsx b/src/views/Center/components/FeatureEntryPanel/index.tsx new file mode 100644 index 00000000..e11321ee --- /dev/null +++ b/src/views/Center/components/FeatureEntryPanel/index.tsx @@ -0,0 +1,73 @@ +/** + * FeatureEntryPanel - 功能入口面板 + * 黑金色主题，展示平台核心功能快捷入口 + */ +import React, { useCallback } from 'react'; +import { Box, SimpleGrid, HStack, Text, Icon } from '@chakra-ui/react'; +import { CheckCircleIcon } from '@chakra-ui/icons'; +import { useNavigate } from 'react-router-dom'; +import GlassCard from '@components/GlassCard'; +import { CORE_FEATURES } from '@/constants/homeFeatures'; +import type { Feature } from '@/types/home'; +import FeatureCardItem from './FeatureCardItem'; + +const FeatureEntryPanel: React.FC = () => { + const navigate = useNavigate(); + + const handleFeatureClick = useCallback( + (feature: Feature) => { + if (feature.url.startsWith('http')) { + window.open(feature.url, '_blank'); + } else { + navigate(feature.url); + } + }, + [navigate] + ); + + return ( + + {/* 标题栏 - 参考投资仪表盘样式 */} + + + + 核心功能入口 + + + + + {/* 功能卡片网格 */} + + {CORE_FEATURES.map((feature) => ( + + ))} + + + ); +}; + +export default FeatureEntryPanel; diff --git a/src/views/Center/index.tsx b/src/views/Center/index.tsx index d5809feb..459b4756 100644 --- a/src/views/Center/index.tsx +++ b/src/views/Center/index.tsx @@ -7,6 +7,7 @@ import React from 'react'; import { Box } from '@chakra-ui/react'; +import FeatureEntryPanel from './components/FeatureEntryPanel'; import InvestmentPlanningCenter from './components/InvestmentPlanningCenter'; import MarketDashboard from '@views/Profile/components/MarketDashboard'; import ForumCenter from '@views/Profile/components/ForumCenter'; @@ -33,6 +34,11 @@ const Center: React.FC = () => { + {/* 功能入口面板 */} + + + + {/* 投资规划中心（整合了日历、计划、复盘，应用 FUI 毛玻璃风格） */}