feat: 登录显示加载遮罩并将统计面板图表改为异步加载
- 登录请求期间显示全屏遮罩与「正在登录」提示,并等待路由跳转完成再隐藏 - 统计面板 echarts 改为 defineAsyncComponent 按需加载,避免阻塞登录后首屏
This commit is contained in:
@@ -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() // 消息提示
|
||||
|
||||
Reference in New Issue
Block a user