feat: add echarts

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>