style: 优化资产配置模块高度,使布局更紧凑

- 图表高度从 280px 降低到 200px
- 调整圆环大小和位置使其在较小空间内显示更协调
- 减少 CardBody 和详细配置信息的间距

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-24 13:16:29 +08:00
parent 901ac53453
commit adc802da94
2 changed files with 9 additions and 9 deletions

View File

@@ -267,15 +267,15 @@ export default function AccountOverview({ account, tradingEvents }) {
</Badge> </Badge>
</HStack> </HStack>
</CardHeader> </CardHeader>
<CardBody> <CardBody pt={0}>
<AssetAllocationChart <AssetAllocationChart
cashAmount={account?.availableCash || 0} cashAmount={account?.availableCash || 0}
stockAmount={account?.marketValue || 0} stockAmount={account?.marketValue || 0}
height={280} height={200}
/> />
{/* 详细配置信息 */} {/* 详细配置信息 */}
<VStack spacing={3} mt={4}> <VStack spacing={2} mt={2}>
<HStack justify="space-between" w="full"> <HStack justify="space-between" w="full">
<HStack spacing={2}> <HStack spacing={2}>
<Box w={3} h={3} bg="blue.400" borderRadius="sm" /> <Box w={3} h={3} bg="blue.400" borderRadius="sm" />

View File

@@ -15,12 +15,12 @@ interface AssetAllocationChartProps {
* 资产配置环形图 * 资产配置环形图
* @param cashAmount - 现金资产金额 * @param cashAmount - 现金资产金额
* @param stockAmount - 股票资产金额 * @param stockAmount - 股票资产金额
* @param height - 图表高度,默认 280px * @param height - 图表高度,默认 200px
*/ */
export const AssetAllocationChart = ({ export const AssetAllocationChart = ({
cashAmount, cashAmount,
stockAmount, stockAmount,
height = 280 height = 200
}: AssetAllocationChartProps) => { }: AssetAllocationChartProps) => {
const total = cashAmount + stockAmount; const total = cashAmount + stockAmount;
@@ -48,7 +48,7 @@ export const AssetAllocationChart = ({
}, },
legend: { legend: {
orient: 'horizontal', orient: 'horizontal',
bottom: 10, bottom: 0,
left: 'center', left: 'center',
textStyle: { textStyle: {
color: '#666', color: '#666',
@@ -62,8 +62,8 @@ export const AssetAllocationChart = ({
{ {
name: '资产配置', name: '资产配置',
type: 'pie', type: 'pie',
radius: ['45%', '70%'], radius: ['40%', '65%'],
center: ['50%', '45%'], center: ['50%', '42%'],
avoidLabelOverlap: true, avoidLabelOverlap: true,
itemStyle: { itemStyle: {
borderRadius: 4, borderRadius: 4,