68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
|
import { defineComponent } from 'vue';
|
||
|
|
import { Card, Col, Row, Statistic } from 'ant-design-vue';
|
||
|
|
import styles from './Dashboard.module.less';
|
||
|
|
|
||
|
|
interface StatItem {
|
||
|
|
title: string;
|
||
|
|
value: number;
|
||
|
|
suffix: string;
|
||
|
|
precision?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 工作台 / 仪表盘
|
||
|
|
*/
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'Dashboard',
|
||
|
|
setup() {
|
||
|
|
const stats: StatItem[] = [
|
||
|
|
{ title: '今日访问', value: 1280, suffix: '次' },
|
||
|
|
{ title: '活跃用户', value: 368, suffix: '人' },
|
||
|
|
{ title: '订单总数', value: 9920, suffix: '单' },
|
||
|
|
{ title: '处理率', value: 96.8, suffix: '%', precision: 1 },
|
||
|
|
];
|
||
|
|
|
||
|
|
return () => (
|
||
|
|
<div class={styles.container}>
|
||
|
|
<h2 class={styles.title}>工作台</h2>
|
||
|
|
|
||
|
|
<Row gutter={[16, 16]}>
|
||
|
|
{stats.map((item) => (
|
||
|
|
<Col key={item.title} xs={24} sm={12} lg={6}>
|
||
|
|
<Card>
|
||
|
|
<Statistic
|
||
|
|
title={item.title}
|
||
|
|
value={item.value}
|
||
|
|
suffix={item.suffix}
|
||
|
|
precision={item.precision}
|
||
|
|
/>
|
||
|
|
</Card>
|
||
|
|
</Col>
|
||
|
|
))}
|
||
|
|
</Row>
|
||
|
|
|
||
|
|
<Card class={styles.panel} title="项目说明">
|
||
|
|
<p>
|
||
|
|
欢迎使用 CPMS 运营平台。这是一个基于 Vue 3 + Vite + TypeScript + Ant Design Vue
|
||
|
|
搭建的中后台管理项目骨架,采用 TSX 写法,你可以在此基础上继续开发业务功能。
|
||
|
|
</p>
|
||
|
|
<ul>
|
||
|
|
<li>
|
||
|
|
开发命令:<code>npm run dev</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
构建(测试环境):<code>npm run build:test</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
构建(生产环境):<code>npm run build:prod</code>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
代码检查:<code>npm run lint</code>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
},
|
||
|
|
});
|