refactor(projects): perf page home

2025-12-25 22:30:19 +08:00 · 2024-01-26 01:51:06 +08:00
parent 123fd4f96c
commit 4c61c6ff3c
7 changed files with 288 additions and 222 deletions
--- a/src/views/home/modules/pie-chart.vue
+++ b/src/views/home/modules/pie-chart.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { $t } from '@/locales';
+import { useAppStore } from '@/store/modules/app';
+import { useEcharts } from '@/hooks/chart/use-echarts';
+
+defineOptions({
+  name: 'PieChart'
+});
+
+const appStore = useAppStore();
+
+const { domRef, updateOptions } = useEcharts(() => ({
+  tooltip: {
+    trigger: 'item'
+  },
+  legend: {
+    bottom: '1%',
+    left: 'center',
+    itemStyle: {
+      borderWidth: 0
+    }
+  },
+  series: [
+    {
+      color: ['#5da8ff', '#8e9dff', '#fedc69', '#26deca'],
+      name: $t('page.home.schedule'),
+      type: 'pie',
+      radius: ['45%', '75%'],
+      avoidLabelOverlap: false,
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: '#fff',
+        borderWidth: 1
+      },
+      label: {
+        show: false,
+        position: 'center'
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: '12'
+        }
+      },
+      labelLine: {
+        show: false
+      },
+      data: [] as { name: string; value: number }[]
+    }
+  ]
+}));
+
+async function mockData() {
+  await new Promise(resolve => {
+    setTimeout(resolve, 1000);
+  });
+
+  updateOptions(opts => {
+    opts.series[0].data = [
+      { name: $t('page.home.study'), value: 20 },
+      { name: $t('page.home.entertainment'), value: 10 },
+      { name: $t('page.home.work'), value: 40 },
+      { name: $t('page.home.rest'), value: 30 }
+    ];
+
+    return opts;
+  });
+}
+
+function updateLocale() {
+  updateOptions((opts, factory) => {
+    const originOpts = factory();
+
+    opts.series[0].name = originOpts.series[0].name;
+
+    opts.series[0].data = [
+      { name: $t('page.home.study'), value: 20 },
+      { name: $t('page.home.entertainment'), value: 10 },
+      { name: $t('page.home.work'), value: 40 },
+      { name: $t('page.home.rest'), value: 30 }
+    ];
+
+    return opts;
+  });
+}
+
+async function init() {
+  mockData();
+}
+
+watch(
+  () => appStore.locale,
+  () => {
+    updateLocale();
+  }
+);
+
+// init
+init();
+</script>
+
+<template>
+  <NCard :bordered="false" class="card-wrapper">
+    <div ref="domRef" class="h-360px overflow-hidden"></div>
+  </NCard>
+</template>
+
+<style scoped></style>