a4736a49f8
* chore: update deps * feat: use jsonc/x language * chore: update eslint 10.0 * fix: no-useless-assignment * feat: add CLAUDE.md * chore: ignore * feat: claude * fix: lint * chore: suppot eslint v10 * fix: lint * fix: lint * fix: type check * fix: unit test * fix: Suggested fix * fix: unit test * chore: update stylelint v17 * chore: update all major deps * fix: echarts console warn * chore: update vitest v4 * feat: add skills ignores * chore: update deps * chore: update deps * fix: cspell * chore: update deps * chore: update tailwindcss v4 * chore: remove postcss config * fix: no use catalog * chore: tailwind v4 config * fix: tailwindcss v4 sort * feat: use eslint-plugin-better-tailwindcss * fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier * fix: Interference between enforce-consistent-line-wrapping, jsx-curly-brace-presence and Prettier * fix(lint): resolve prettier and better-tailwindcss formatting conflicts * fix(tailwind): update theme references and lint sources * style(format): normalize apps docs and playground vue files * style(format): normalize core ui-kit components * style(format): normalize effects ui and layout components
91 lines
2.1 KiB
Vue
91 lines
2.1 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 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">
|
|
<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:mt-0 md:mr-4 md:w-1/3" title="访问数量">
|
|
<AnalyticsVisitsData />
|
|
</AnalysisChartCard>
|
|
<AnalysisChartCard class="mt-5 md:mt-0 md:mr-4 md:w-1/3" title="访问来源">
|
|
<AnalyticsVisitsSource />
|
|
</AnalysisChartCard>
|
|
<AnalysisChartCard class="mt-5 md:mt-0 md:w-1/3" title="访问来源">
|
|
<AnalyticsVisitsSales />
|
|
</AnalysisChartCard>
|
|
</div>
|
|
</div>
|
|
</template>
|