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

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

src/views/Home/components/MineTask/Index.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue';
+import { showToast } from 'vant';
+import { useSetPieChart } from '@/hooks/chart/usePieChart';
+
+// 饼图 dom 结构
+const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
+
+useSetPieChart(pieChart, [1], { title: false, ledge: false });
+
+// 任务数据
+const taskData = ref({
+  title: '问卷A',
+  progress: 100,
+  deadline: '2025-03-31至04-01',
+  creator: '张三',
+  creationMethod: '移动端',
+  creationTime: '2025-03-04',
+  responseCount: 10,
+  responseRate: '10%',
+  submissionRate: '10%',
+  status: '草稿中'
+});
+
+// 图表数据
+const chartData = ref([
+  { name: '选项1', value: 66.77, color: '#F56C6C' },
+  { name: '选项2', value: 33.33, color: '#F7BA2A' },
+  { name: '选项3', value: 0, color: '#67C23A' },
+  { name: '选项4', value: 0, color: '#409EFF' }
+]);
+
+// 导航按钮点击事件
+const handlePrev = () => {
+  showToast('点击了上一个问题');
+};
+
+const handleNext = () => {
+  showToast('点击了下一个问题');
+};
+</script>
+
+<template>
+  <van-card class="task-card">
+    <!-- 状态标签 -->
+    <template #tags>
+      <el-tag type="success" effect="plain">{{ taskData.status }}</el-tag>
+    </template>
+
+    <!-- 标题部分 -->
+    <template #title>
+      <van-space>
+        <span style="font-size: 18px; font-weight: bold">{{ taskData.title }}</span>
+        <span style="color: #409eff">{{ taskData.progress }}%</span>
+        <span style="color: #606266; font-size: 14px">| {{ taskData.deadline }}</span>
+      </van-space>
+    </template>
+
+    <!-- 创建者信息 -->
+    <template #desc>
+      <el-space spacer="|">
+        <span>{{ taskData.creator }}</span>
+        <span>{{ taskData.creationMethod }}</span>
+        <span>创建时间:{{ taskData.creationTime }}</span>
+      </el-space>
+    </template>
+
+    <template #price>
+      <!-- 空的价格区域 -->
+    </template>
+
+    <!-- 卡片内容 -->
+    <template #bottom>
+      <van-space direction="vertical" fill style="width: 100%; padding-top: 16px">
+        <!-- 任务统计 -->
+        <van-grid :column-num="3">
+          <van-grid-item>
+            <van-space direction="vertical" fill>
+              <span style="color: #67c23a; font-size: 18px; font-weight: bold">{{
+                taskData.responseCount
+              }}</span>
+              <span style="font-size: 14px; color: #909399">回收数量</span>
+            </van-space>
+          </van-grid-item>
+          <van-grid-item>
+            <van-space direction="vertical" fill>
+              <span style="color: #67c23a; font-size: 18px; font-weight: bold">{{
+                taskData.responseRate
+              }}</span>
+              <span style="font-size: 14px; color: #909399">回收数量进度</span>
+            </van-space>
+          </van-grid-item>
+          <van-grid-item>
+            <van-space direction="vertical" fill>
+              <span style="color: #67c23a; font-size: 18px; font-weight: bold">{{
+                taskData.submissionRate
+              }}</span>
+              <span style="font-size: 14px; color: #909399">投放时间进度</span>
+            </van-space>
+          </van-grid-item>
+        </van-grid>
+
+        <!-- 问题部分 -->
+        <van-divider />
+
+        <p>1. 能描述您为自己或家人购买这款产品A的可能性吗？（单选）</p>
+
+        <!-- 图表部分 -->
+        <div style="display: flex; justify-content: center; margin: 16px 0">
+          <span ref="pieChart" style="width: 100%; height: 300px"></span>
+        </div>
+
+        <!-- 选项列表 -->
+        <van-cell-group inset>
+          <van-cell v-for="(item, index) in chartData" :key="index">
+            <template #title>
+              <van-tag :color="item.value > 0 ? item.color : '#dcdfe6'" plain>
+                {{ item.name }}
+              </van-tag>
+            </template>
+            <template #value>
+              <span>{{ item.value.toFixed(2) }}%</span>
+            </template>
+          </van-cell>
+        </van-cell-group>
+      </van-space>
+      <!-- 导航按钮 左右按钮-->
+      <!--      <div style="position: fixed; left: 16px; top: 50%; transform: translateY(-50%)">-->
+      <!--        <van-button round icon="arrow-left" @click="handlePrev" />-->
+      <!--      </div>-->
+
+      <!--      <div style="position: fixed; right: 16px; top: 50%; transform: translateY(-50%)">-->
+      <!--        <van-button round icon="arrow" @click="handleNext" />-->
+      <!--      </div>-->
+    </template>
+  </van-card>
+</template>
+
+<style lang="scss" scoped>
+.task-card {
+  //margin: 16px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+</style>