refactor(重构首页): ♻️ 使用静态数据循环渲染

src/views/dashboard/index.vue

@@ -22,32 +22,18 @@
 
         <el-col :span="6" :xs="24">
           <div class="flex h-full items-center justify-around">
-            <el-statistic :value="99">
+            <el-statistic
+              v-for="item in statisticData"
+              :key="item.key"
+              :value="item.value"
+            >
               <template #title>
                 <div class="flex items-center">
-                  <svg-icon icon-class="message" size="20px" />
-                  <span class="text-[16px] ml-1">消息</span>
-                </div>
-              </template>
-            </el-statistic>
-
-            <el-statistic :value="50">
-              <template #title>
-                <div class="flex items-center">
-                  <svg-icon icon-class="todolist" size="20px" />
-                  <span class="text-[16px] ml-1">待办</span>
-                </div>
-              </template>
-              <template #suffix>/100</template>
-            </el-statistic>
-
-            <el-statistic :value="10">
-              <template #title>
-                <div class="flex items-center">
-                  <svg-icon icon-class="project" size="20px" />
-                  <span class="text-[16px] ml-1">项目</span>
+                  <svg-icon :icon-class="item.iconClass" size="20px" />
+                  <span class="text-[16px] ml-1">{{ item.title }}</span>
                 </div>
               </template>
+              <template v-if="item.suffix" #suffix>/100</template>
             </el-statistic>
           </div>
         </el-col>
@@ -56,105 +42,37 @@
 
     <!-- 数据卡片 -->
     <el-row :gutter="10" class="mt-3">
-      <el-col :xs="24" :sm="12" :lg="6">
+      <el-col
+        :xs="24"
+        :sm="12"
+        :lg="6"
+        v-for="(item, index) in cardData"
+        :key="index"
+      >
         <el-card shadow="never">
           <template #header>
             <div class="flex items-center justify-between">
-              <span class="text-[var(--el-text-color-secondary)]">访客数</span>
-              <el-tag type="success">日</el-tag>
+              <span class="text-[var(--el-text-color-secondary)]">{{
+                item.title
+              }}</span>
+              <el-tag :type="item.tagType">
+                {{ item.tagText }}
+              </el-tag>
             </div>
           </template>
 
           <div class="flex items-center justify-between mt-5">
             <div class="text-lg text-right">
-              {{ Math.round(visitCountOutput) }}
+              {{ Math.round(item.count) }}
             </div>
-            <svg-icon icon-class="visit" size="2em" />
+            <svg-icon :icon-class="item.iconClass" size="2em" />
           </div>
 
           <div
             class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
           >
-            <span> 总访客数 </span>
-            <span> {{ Math.round(visitCountOutput * 15) }} </span>
-          </div>
-        </el-card>
-      </el-col>
-
-      <!--消息数-->
-      <el-col :xs="24" :sm="12" :lg="6">
-        <el-card shadow="never">
-          <template #header>
-            <div class="flex items-center justify-between">
-              <span class="text-[var(--el-text-color-secondary)]">IP数</span>
-              <el-tag type="success">日</el-tag>
-            </div>
-          </template>
-
-          <div class="flex items-center justify-between mt-5">
-            <div class="text-lg text-right">
-              {{ Math.round(dauCountOutput) }}
-            </div>
-            <svg-icon icon-class="ip" size="2em" />
-          </div>
-
-          <div
-            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
-          >
-            <span> 总IP数 </span>
-            <span> {{ Math.round(dauCountOutput) }} </span>
-          </div>
-        </el-card>
-      </el-col>
-
-      <!--销售额-->
-      <el-col :xs="24" :sm="12" :lg="6">
-        <el-card shadow="never">
-          <template #header>
-            <div class="flex items-center justify-between">
-              <span class="text-[var(--el-text-color-secondary)]">销售额</span>
-              <el-tag>月</el-tag>
-            </div>
-          </template>
-
-          <div class="flex items-center justify-between mt-5">
-            <div class="text-lg text-right">
-              {{ Math.round(amountOutput) }}
-            </div>
-            <svg-icon icon-class="money" size="2em" />
-          </div>
-
-          <div
-            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
-          >
-            <span> 总销售额 </span>
-            <span> {{ Math.round(amountOutput * 15) }} </span>
-          </div>
-        </el-card>
-      </el-col>
-
-      <!--订单量-->
-      <el-col :xs="24" :sm="12" :lg="6">
-        <el-card shadow="never">
-          <template #header>
-            <div class="flex items-center justify-between">
-              <span class="text-[var(--el-text-color-secondary)]">订单量</span>
-              <el-tag type="danger">季</el-tag>
-            </div>
-          </template>
-
-          <div class="flex items-center justify-between mt-5">
-            <div class="text-lg text-right">
-              {{ Math.round(orderCountOutput) }}
-            </div>
-            <svg-icon icon-class="order" size="2em" />
-          </div>
-
-          <div
-            class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
-          >
-            <span> 总订单量 </span>
-            <span> {{ Math.round(orderCountOutput * 15) }} </span>
+            <span> {{ item.dataDesc }} </span>
+            <span> {{ Math.round(item.count * 15) }} </span>
           </div>
         </el-card>
       </el-col>
@@ -162,27 +80,17 @@
 
     <!-- Echarts 图表 -->
     <el-row :gutter="10" class="mt-3">
-      <el-col :sm="24" :lg="8" class="mb-2">
-        <BarChart
-          id="barChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
-        <PieChart
-          id="pieChart"
-          height="400px"
-          width="100%"
-          class="bg-[var(--el-bg-color-overlay)]"
-        />
-      </el-col>
-
-      <el-col :xs="24" :sm="12" :lg="8" class="mb-2">
-        <RadarChart
-          id="radarChart"
+      <el-col
+        :xs="24"
+        :sm="12"
+        :lg="8"
+        class="mb-2"
+        v-for="item in chartData"
+        :key="item"
+      >
+        <component
+          :is="chartComponent(item)"
+          :id="item"
           height="400px"
           width="100%"
           class="bg-[var(--el-bg-color-overlay)]"
@@ -193,6 +101,7 @@
 </template>
 
 <script setup lang="ts">
+import type { EpPropMergeType } from "element-plus/es/utils/vue/props/types";
 defineOptions({
   name: "Dashboard",
   inheritAttrs: false,
@@ -252,6 +161,82 @@ const orderCountOutput = useTransition(orderCount, {
   transition: TransitionPresets.easeOutExpo,
 });
 orderCount.value = 2000;
+
+// 右上角数量
+const statisticData = ref([
+  {
+    value: 99,
+    iconClass: "message",
+    title: "消息",
+    key: "message",
+  },
+  {
+    value: 50,
+    iconClass: "todolist",
+    title: "待办",
+    suffix: "/100",
+    key: "upcoming",
+  },
+  {
+    value: 10,
+    iconClass: "project",
+    title: "项目",
+    key: "project",
+  },
+]);
+
+interface CardProp {
+  title: string;
+  tagType: EpPropMergeType<
+    StringConstructor,
+    "primary" | "success" | "info" | "warning" | "danger",
+    unknown
+  >;
+  tagText: string;
+  count: any;
+  dataDesc: string;
+  iconClass: string;
+}
+// 卡片数量
+const cardData = ref<CardProp[]>([
+  {
+    title: "访客数",
+    tagType: "success",
+    tagText: "日",
+    count: visitCountOutput,
+    dataDesc: "总访客数",
+    iconClass: "visit",
+  },
+  {
+    title: "IP数",
+    tagType: "success",
+    tagText: "日",
+    count: dauCountOutput,
+    dataDesc: "总IP数",
+    iconClass: "ip",
+  },
+  {
+    title: "销售额",
+    tagType: "primary",
+    tagText: "月",
+    count: amountOutput,
+    dataDesc: "总IP数",
+    iconClass: "money",
+  },
+  {
+    title: "订单量",
+    tagType: "danger",
+    tagText: "季",
+    count: orderCountOutput,
+    dataDesc: "总订单量",
+    iconClass: "order",
+  },
+]);
+// 图表数据
+const chartData = ref(["BarChart", "PieChart", "RadarChart"]);
+const chartComponent = (item: string) => {
+  return defineAsyncComponent(() => import(`./components/${item}.vue`));
+};
 </script>
 
 <style lang="scss" scoped>