feat: 登录显示加载遮罩并将统计面板图表改为异步加载

- 登录请求期间显示全屏遮罩与「正在登录」提示,并等待路由跳转完成再隐藏
- 统计面板 echarts 改为 defineAsyncComponent 按需加载,避免阻塞登录后首屏
This commit is contained in:
2026-09-21 21:24:12 +08:00
parent 09ca5b43fb
commit 06fd80d55f
3 changed files with 52 additions and 10 deletions
+23 -8
View File
@@ -1,15 +1,10 @@
<script setup lang="ts">
// 统计面板组件:展示指定时间范围的收支汇总、概览指标、趋势、分类占比与交易渠道分布
import { ref, computed, onMounted, watch, nextTick, unref } from 'vue'
import { ref, computed, onMounted, watch, nextTick, unref, defineAsyncComponent } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { NCard, NGrid, NGridItem, NStatistic, NSpace, NSelect, NDatePicker, NInput, NInputNumber, NButton, NAutoComplete, NModal, NAlert, NDropdown, NIcon, useMessage } from 'naive-ui'
import { SparklesOutline, BulbOutline } from '@vicons/ionicons5'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import { getStatisticsSummary, getStatisticsGroup } from '../api/statistics'
import { getCategoryList } from '../api/category'
import { getTagList } from '../api/tag'
@@ -20,8 +15,28 @@ import { useKeywordHistory } from '../composables/useKeywordHistory'
import { getChannelLabel } from '../utils/channel'
import { renderCategoryLabel } from '../utils/render'
// 注册 ECharts 所需组件
use([CanvasRenderer, LineChart, PieChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
// 图表组件异步加载:echarts 体积较大,登录后进入面板时先渲染页面骨架,
// echarts 在后台按需下载并注册,避免阻塞目标页首屏
const VChart = defineAsyncComponent(async () => {
const [vueEcharts, echartsCore, renderers, charts, components] = await Promise.all([
import('vue-echarts'),
import('echarts/core'),
import('echarts/renderers'),
import('echarts/charts'),
import('echarts/components'),
])
echartsCore.use([
renderers.CanvasRenderer,
charts.LineChart,
charts.PieChart,
charts.BarChart,
components.TitleComponent,
components.TooltipComponent,
components.LegendComponent,
components.GridComponent,
])
return vueEcharts.default
})
const { t, locale } = useI18n() // 国际化
const message = useMessage() // 消息提示