feat: 完善首页布局并添加组件

1. 添加首页轮播图组件 ImageSlider。
2. 添加我的任务组件 MineTask，展示用户任务事项。
3. 调整首页组件结构，优化页面展示效果。
4. 更新 TypeScript 版本至 5.8.3。
5. 将 tsconfig.app.json 中的 module 修改为 ESNext，适配新的模块加载方式。
6. 在文档中强调使用 Vue3 的 `<script setup>` 语法。
7. 添加 Echarts依赖

src/hooks/chart/data/pie.ts

@@ -0,0 +1,48 @@
+import { ref } from 'vue';
+
+const option = {
+  // title: {
+  //   text: 'Referer of a Website',
+  //   subtext: 'Fake Data',
+  //   left: 'center'
+  // },
+  // tooltip: {
+  //   trigger: 'item'
+  // },
+  // legend: {
+  //   orient: 'vertical',
+  //   left: 'left'
+  // },
+  series: [
+    {
+      name: 'Access From',
+      type: 'pie',
+      radius: '50%',
+      data: [
+        { value: 1048, name: 'Search Engine' },
+        { value: 735, name: 'Direct' },
+        { value: 580, name: 'Email' },
+        { value: 484, name: 'Union Ads' },
+        { value: 300, name: 'Video Ads' }
+      ],
+      emphasis: {
+        itemStyle: {
+          shadowBlur: 10,
+          shadowOffsetX: 0,
+          shadowColor: 'rgba(0, 0, 0, 0.5)'
+        }
+      }
+    }
+  ]
+};
+
+export const pieOption = ref<Partial<typeof option>>(option);
+
+// 删除左侧的预览图
+export function deleteLegend() {
+  delete pieOption.value.legend;
+}
+
+export function deleteTitle() {
+  delete pieOption.value.title;
+}

src/hooks/chart/types/index.d.ts

@@ -0,0 +1,6 @@
+type optsType =
+  | {
+      title: boolean;
+      legend: boolean;
+    }
+  | {};

src/hooks/chart/usePieChart.ts

@@ -0,0 +1,64 @@
+import { onMounted, ref, type ShallowRef, watch } from 'vue';
+import type { ECOption } from '@/utils/echarts';
+import { chart } from '@/utils/echarts';
+import { deleteLegend, deleteTitle, pieOption } from './data/pie';
+
+type dataOption = Partial<ECOption['data']>;
+
+const pieChart = ref();
+/**
+ *  定义数据集
+ */
+const series = ref<dataOption[]>([
+  {
+    name: 'Access From',
+    type: 'pie',
+    radius: '50%',
+    data: [
+      { value: 1048, name: 'Search Engine' },
+      { value: 735, name: 'Direct' },
+      { value: 580, name: 'Email' },
+      { value: 484, name: 'Union Ads' },
+      { value: 300, name: 'Video Ads' }
+    ],
+    emphasis: {
+      itemStyle: {
+        shadowBlur: 10,
+        shadowOffsetX: 0,
+        shadowColor: 'rgba(0, 0, 0, 0.5)'
+      }
+    }
+  }
+]);
+
+/**
+ * 饼图的 option
+ */
+const option = ref(pieOption);
+
+function useSetPieChart(
+  dom: Readonly<ShallowRef<HTMLSpanElement | null>>,
+  data: any[],
+  opts: optsType = {}
+): void {
+  for (let item in opts) {
+    if (item === 'legend') !opts[item] && deleteLegend();
+    else if (item === 'title') !opts[item] && deleteTitle();
+  }
+
+  // 检测边界范围 dom 和 data 是否存在
+  onMounted(() => {
+    console.log(dom);
+    if (!dom || data.length === 0) return;
+    // 在 dom 挂载之后，显示饼图
+    pieChart.value = chart.init(dom.value);
+    pieChart.value.setOption(option.value, opts);
+  });
+
+  // 如果 data 变动，重新生成图表
+  watch(series, (value) => {
+    pieChart.value.setOption(value, opts);
+  });
+}
+
+export { useSetPieChart };