104 lines
2.7 KiB
Vue
104 lines
2.7 KiB
Vue
<script lang="ts" setup>
|
|
import type { AnalysisOverviewItem } from '@vben/common-ui';
|
|
import type { TabOption } from '@vben/types';
|
|
|
|
import {
|
|
AnalysisChartCard,
|
|
AnalysisChartsTabs,
|
|
AnalysisOverview,
|
|
} from '@vben/common-ui';
|
|
import {
|
|
SvgBellIcon,
|
|
SvgCakeIcon,
|
|
SvgCardIcon,
|
|
SvgDownloadIcon,
|
|
} from '@vben/icons';
|
|
|
|
import { Card } from 'ant-design-vue';
|
|
|
|
import AnalyticsTrends from './analytics-trends.vue';
|
|
import AnalyticsVisitsData from './analytics-visits-data.vue';
|
|
import AnalyticsVisitsSales from './analytics-visits-sales.vue';
|
|
import AnalyticsVisitsSource from './analytics-visits-source.vue';
|
|
import AnalyticsVisits from './analytics-visits.vue';
|
|
|
|
const overviewItems: AnalysisOverviewItem[] = [
|
|
{
|
|
icon: SvgCardIcon,
|
|
title: '用户量',
|
|
totalTitle: '总用户量',
|
|
totalValue: 120_000,
|
|
value: 2000,
|
|
},
|
|
{
|
|
icon: SvgCakeIcon,
|
|
title: '访问量',
|
|
totalTitle: '总访问量',
|
|
totalValue: 500_000,
|
|
value: 20_000,
|
|
},
|
|
{
|
|
icon: SvgDownloadIcon,
|
|
title: '下载量',
|
|
totalTitle: '总下载量',
|
|
totalValue: 120_000,
|
|
value: 8000,
|
|
},
|
|
{
|
|
icon: SvgBellIcon,
|
|
title: '使用量',
|
|
totalTitle: '总使用量',
|
|
totalValue: 50_000,
|
|
value: 5000,
|
|
},
|
|
];
|
|
|
|
const chartTabs: TabOption[] = [
|
|
{
|
|
label: '流量趋势',
|
|
value: 'trends',
|
|
},
|
|
{
|
|
label: '月访问量',
|
|
value: 'visits',
|
|
},
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-5">
|
|
<Card class="mb-3 text-lg" size="small" title="公告">
|
|
1.3.0版本(dev中 未发布) 存在不兼容更新 包括
|
|
<div class="text-red-500">
|
|
ImageUpload/FileUpload完全重构 与之前版本api完全不兼容
|
|
</div>
|
|
<div class="text-red-500">TableSwitch组件重构 与之前版本api不兼容</div>
|
|
<div class="text-red-500">
|
|
不再推荐使用useDescription, 这个版本会标记为@deprecated,
|
|
下个次版本将会移除 框架所有使用useDescription组件的会替换为原生(TODO)
|
|
</div>
|
|
</Card>
|
|
<AnalysisOverview :items="overviewItems" />
|
|
<AnalysisChartsTabs :tabs="chartTabs" class="mt-5">
|
|
<template #trends>
|
|
<AnalyticsTrends />
|
|
</template>
|
|
<template #visits>
|
|
<AnalyticsVisits />
|
|
</template>
|
|
</AnalysisChartsTabs>
|
|
|
|
<div class="mt-5 w-full md:flex">
|
|
<AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问数量">
|
|
<AnalyticsVisitsData />
|
|
</AnalysisChartCard>
|
|
<AnalysisChartCard class="mt-5 md:mr-4 md:mt-0 md:w-1/3" title="访问来源">
|
|
<AnalyticsVisitsSource />
|
|
</AnalysisChartCard>
|
|
<AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
|
|
<AnalyticsVisitsSales />
|
|
</AnalysisChartCard>
|
|
</div>
|
|
</div>
|
|
</template>
|