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:
@@ -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" />
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user