feat(ui):细节调整

gpt-vue/projects/vue-admin/src/views/DashboardView.vue

@@ -1,12 +1,21 @@
 <script lang="ts" setup>
 import http from "@/http/config";
 import { ref } from "vue";
+
 const dataSet = {
   users: "今日新增用户",
   chats: "今日新增对话",
   tokens: "今日消耗 Tokens",
   income: "今日入账",
 };
+
+const icons = {
+  users: "icon-user",
+  chats: "icon-wechat",
+  tokens: "icon-computer",
+  income: "icon-wechatpay",
+};
+
 const data = ref<Record<string, number>>({});
 const getData = () => {
   http({
@@ -20,19 +29,27 @@ getData();
 </script>
 <template>
   <div class="dashboard">
-    <div class="data-card" v-for="(value, key) in dataSet" :key="key">
-      <span :class="key" class="icon"><icon-user /></span>
-      <span class="count"
-        ><a-statistic :extra="value" :value="data[key]" :precision="0"
-      /></span>
-    </div>
+    <a-grid :cols="{ xs: 1, sm: 1, md: 2, lg: 3, xl: 4 }" :colGap="12" :rowGap="16" class="grid">
+      <a-grid-item v-for="(value, key) in dataSet" :key="key">
+        <div class="data-card">
+          <span :class="key" class="icon"><icon-user /></span>
+          <span class="count"
+            ><a-statistic :extra="value" :value="data[key]" :precision="0"
+          /></span>
+        </div>
+      </a-grid-item>
+    </a-grid>
   </div>
 </template>
 <style lang="less" scoped>
 .dashboard {
   display: flex;
   text-align: center;
+  .grid {
+    width: 100%;
+  }
   .data-card {
+    width: 100%;
     display: flex;
     flex: 0 0 25%;
     padding: 0 10px;