feat: add echarts

src/components/card/DevelopProgressCard.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import DevelopProgressDiagram from "../diagram/DevelopProgressDiagram.vue";
+
+const props = defineProps<{
+  completed: number;
+  pending: number;
+  title: string;
+  intro: string;
+}>();
+</script>
+
+<template>
+  <div class="card bg-base-100 w-96 shadow-sm">
+    <DevelopProgressDiagram
+      :completed="props.completed"
+      :pending="props.pending"
+    />
+    <div class="card-body">
+      <h2 class="card-title">{{ props.title }}</h2>
+      <p>
+        {{ props.intro }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

src/components/diagram/DevelopProgressDiagram.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { use } from "echarts/core";
+import { PieChart } from "echarts/charts";
+import { TooltipComponent, LegendComponent } from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import VChart from "vue-echarts";
+import { type EChartsOption } from "echarts";
+
+use([TooltipComponent, LegendComponent, PieChart, CanvasRenderer]);
+
+const props = defineProps<{
+  completed: number;
+  pending: number;
+}>();
+
+const option = ref<EChartsOption>({
+  color: ["#52c41a", "#ff4d4f"],
+  legend: {
+    top: "5%",
+    left: "center",
+  },
+  series: [
+    {
+      name: "开发进度",
+      type: "pie",
+      radius: ["40%", "70%"],
+      itemStyle: {
+        borderRadius: 10,
+        borderColor: "#fff",
+        borderWidth: 2,
+      },
+      label: {
+        show: false,
+        position: "center",
+      },
+      labelLine: {
+        show: false,
+      },
+      emphasis: {
+        label: {
+          show: true,
+          fontSize: 32,
+          fontWeight: "bold",
+          formatter: "{d}%",
+        },
+      },
+      data: [
+        { value: props.completed, name: "已完成" },
+        { value: props.pending, name: "待开发" },
+      ],
+    },
+  ],
+});
+</script>
+
+<template>
+  <div class="h-96 w-96">
+    <VChart :option="option" />
+  </div>
+</template>
+
+<style scoped></style>

src/pages/index.vue

@@ -1,14 +1,51 @@
 <script lang="ts" setup>
-import DatePicker from "@/components/date-picker/DatePicker.vue";
+import DevelopProgressCard from "@/components/card/DevelopProgressCard.vue";
 import NavBar from "@/components/menu/NavBar.vue";
+
+const progress = ref([
+  {
+    name: "auto-router",
+    completed: 80,
+    pending: 20,
+    title: "自动路由开发进度",
+    intro: "自动将 pages 目录下的所有 vue 文件转换为路由",
+  },
+  {
+    name: "component-list",
+    completed: 95,
+    pending: 5,
+    title: "组件库开发进度",
+    intro: "自动加载项目所需要的组件库",
+  },
+  {
+    name: "international",
+    completed: 95,
+    pending: 5,
+    title: "国际化开发进度",
+    intro: "有序地组织项目翻译文件",
+  },
+  {
+    name: "chart",
+    completed: 95,
+    pending: 5,
+    title: "图表开发进度",
+    intro: "使用精美的图表呈现内容",
+  },
+]);
 </script>
 
 <template>
   <div>
     <NavBar />
-    <div class="mt-4">
-      <div>路由系统加载进度：100%</div>
-      <DatePicker />
+    <div class="w-full p-4 grid grid-cols-3 gap-4 justify-items-center">
+      <DevelopProgressCard
+        v-for="item in progress"
+        :key="item.title"
+        :completed="item.completed"
+        :pending="item.pending"
+        :title="item.title"
+        :intro="item.intro"
+      />
     </div>
   </div>
 </template>