feat(@vben/web-antd): 新增 CardTitle组件并优化 TimeSummaryChart

- 新增 CardTitle 组件用于统一卡片标题样式
- 在 TimeSummaryChart 中使用 CardTitle 组件替代原生标题
- 调整 EchartsUI 组件的 height 属性单位
pull/181/MERGE
nehc 2025-07-21 20:47:09 +08:00 committed by xingyu
parent f763ad2855
commit dcffb9bbe3
3 changed files with 38 additions and 2 deletions

View File

@ -0,0 +1,33 @@
<script lang="ts" setup>
interface Props {
title: string;
}
defineProps<Props>();
</script>
<template>
<span class="card-title">{{ title }}</span>
</template>
<style scoped>
.card-title {
position: relative;
padding-left: 12px;
font-size: 14px;
font-weight: 600;
}
.card-title::before {
position: absolute;
top: 50%;
left: 0;
display: inline-block;
width: 3px;
height: 14px;
content: '';
background: #1890ff;
border-radius: 2px;
transform: translateY(-50%);
}
</style>

View File

@ -0,0 +1 @@
export { default as CardTitle } from './card-title.vue';

View File

@ -9,6 +9,8 @@ import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
import { Card } from 'ant-design-vue';
import { CardTitle } from '#/components/card';
interface Props {
title: string;
value?: Array<{ price: number; time: string }>;
@ -112,9 +114,9 @@ watch(
<template>
<Card>
<template #title>
{{ title }}
<CardTitle :title="title" />
</template>
<!-- 折线图 -->
<EchartsUI ref="chartRef" :height="300" />
<EchartsUI ref="chartRef" />
</Card>
</template>