refactor: ♻️ 首页样式优化

Former-commit-id: 0f654102f345f64d76b00ed43bde50066319f89a

src/views/dashboard/index.vue

@@ -15,11 +15,11 @@ const greetings = computed(() => {
   if (hours >= 6 && hours < 8) {
     return "晨起披衣出草堂，轩窗已自喜微凉🌅！";
   } else if (hours >= 8 && hours < 12) {
-    return "上午好🌞！";
+    return "上午好，" + useUserStore().user.nickname + "！";
   } else if (hours >= 12 && hours < 18) {
-    return "下午好☕！";
+    return "下午好，" + useUserStore().user.nickname + "！";
   } else if (hours >= 18 && hours < 24) {
-    return "晚上好🌃！";
+    return "晚上好，" + useUserStore().user.nickname + "！";
   } else if (hours >= 0 && hours < 6) {
     return "偷偷向银河要了一把碎星，只等你闭上眼睛撒入你的梦中，晚安🌛！";
   }
@@ -27,7 +27,7 @@ const greetings = computed(() => {
 
 const duration = 5000;
 
-// 收入金额
+// 销售额
 const amount = ref(0);
 const amountOutput = useTransition(amount, {
   duration: duration,
@@ -35,7 +35,7 @@ const amountOutput = useTransition(amount, {
 });
 amount.value = 2000;
 
-// 访问数
+// 访问量
 const visitCount = ref(0);
 const visitCountOutput = useTransition(visitCount, {
   duration: duration,
@@ -43,15 +43,15 @@ const visitCountOutput = useTransition(visitCount, {
 });
 visitCount.value = 2000;
 
-//消息数
-const messageCount = ref(0);
-const messageCountOutput = useTransition(messageCount, {
+// 留资数
+const dauCount = ref(0);
+const dauCountOutput = useTransition(dauCount, {
   duration: duration,
   transition: TransitionPresets.easeOutExpo,
 });
-messageCount.value = 2000;
+dauCount.value = 2000;
 
-// 订单数
+// 订单量
 const orderCount = ref(0);
 const orderCountOutput = useTransition(orderCount, {
   duration: duration,
@@ -65,57 +65,64 @@ orderCount.value = 2000;
     <!-- github角标 -->
     <github-corner class="github-corner" />
 
-    <!-- 用户信息 -->
-    <el-row class="mb-8">
-      <el-card class="w-full">
-        <div class="flex justify-between flex-wrap">
-          <div class="flex items-center">
+    <el-card shadow="never">
+      <el-row justify="space-between">
+        <el-col :span="18" :xs="24">
+          <div class="flex h-full items-center">
             <img
-              class="user-avatar"
+              class="w-20 h-20 mr-5 rounded-full"
               :src="userStore.user.avatar + '?imageView2/1/w/80/h/80'"
             />
-            <span class="ml-[10px] text-[16px]">
-              {{ userStore.user.nickname }}
-            </span>
+            <div>
+              <p>{{ greetings }}</p>
+              <p class="text-sm text-gray">
+                今日天气晴朗，气温在15℃至25℃之间，东南风。
+              </p>
+            </div>
           </div>
+        </el-col>
 
-          <div class="leading-[40px]">
-            {{ greetings }}
-          </div>
+        <el-col :span="6" :xs="24">
+          <div class="flex h-full items-center justify-around">
+            <el-statistic :value="99">
+              <template #title>
+                <div class="flex items-center">
+                  <svg-icon icon-class="message" :size="16" />
+                  <span class="text-[16px] ml-1">消息</span>
+                </div>
+              </template>
+            </el-statistic>
 
-          <div class="space-x-2 flex items-center justify-end">
-            <el-link
-              target="_blank"
-              type="danger"
-              href="https://blog.csdn.net/u013737132/article/details/130191394"
-              >💥官方从零到一文档</el-link
-            >
-            <el-divider direction="vertical" />
-            <el-link
-              target="_blank"
-              type="success"
-              href="https://gitee.com/youlaiorg"
-              >Gitee</el-link
-            >
-            <el-divider direction="vertical" />
-            <el-link
-              target="_blank"
-              type="primary"
-              href="https://github.com/youlaitech"
-              >GitHub
-            </el-link>
+            <el-statistic :value="50">
+              <template #title>
+                <div class="flex items-center">
+                  <svg-icon icon-class="todolist" :size="16" />
+                  <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="16" />
+                  <span class="text-[16px] ml-1">项目</span>
+                </div>
+              </template>
+            </el-statistic>
           </div>
-        </div>
-      </el-card>
-    </el-row>
+        </el-col>
+      </el-row>
+    </el-card>
 
     <!-- 数据卡片 -->
-    <el-row :gutter="40" class="mb-4">
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+    <el-row :gutter="40" class="mt-3">
+      <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>
+              <span class="text-[var(--el-text-color-secondary)]">访问量</span>
               <el-tag type="success">日</el-tag>
             </div>
           </template>
@@ -131,24 +138,24 @@ orderCount.value = 2000;
             class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
           >
             <span> 总访问数 </span>
-            <span> {{ Math.round(visitCountOutput) }} </span>
+            <span> {{ Math.round(visitCountOutput * 15) }} </span>
           </div>
         </el-card>
       </el-col>
 
       <!--消息数-->
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+      <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>
+              <span class="text-[var(--el-text-color-secondary)]">留资数</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(messageCountOutput) }}
+              {{ Math.round(dauCountOutput) }}
             </div>
             <svg-icon icon-class="message" size="2em" />
           </div>
@@ -156,21 +163,19 @@ orderCount.value = 2000;
           <div
             class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
           >
-            <span> 总消息数 </span>
-            <span> {{ Math.round(messageCountOutput) }} </span>
+            <span> 总留资数 </span>
+            <span> {{ Math.round(dauCountOutput) }} </span>
           </div>
         </el-card>
       </el-col>
 
-      <!--收入金额-->
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+      <!--销售额-->
+      <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="warning">月</el-tag>
+              <span class="text-[var(--el-text-color-secondary)]">销售额</span>
+              <el-tag>月</el-tag>
             </div>
           </template>
 
@@ -184,20 +189,19 @@ orderCount.value = 2000;
           <div
             class="flex items-center justify-between mt-5 text-sm text-[var(--el-text-color-secondary)]"
           >
-            <span> 总收入金额 </span>
-            <span> {{ Math.round(amountOutput) }} </span>
+            <span> 总销售额 </span>
+            <span> {{ Math.round(amountOutput * 15) }} </span>
           </div>
         </el-card>
       </el-col>
 
-      <!--订单数-->
-
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
+      <!--订单量-->
+      <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>
+              <span class="text-[var(--el-text-color-secondary)]">订单量</span>
+              <el-tag type="danger">季</el-tag>
             </div>
           </template>
 
@@ -205,21 +209,21 @@ orderCount.value = 2000;
             <div class="text-lg text-right">
               {{ Math.round(orderCountOutput) }}
             </div>
-            <svg-icon icon-class="cart" size="2em" />
+            <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) }} </span>
+            <span> 总订单量 </span>
+            <span> {{ Math.round(orderCountOutput * 15) }} </span>
           </div>
         </el-card>
       </el-col>
     </el-row>
 
     <!-- Echarts 图表 -->
-    <el-row :gutter="40">
+    <el-row :gutter="40" class="mt-3">
       <el-col :sm="24" :lg="8" class="mb-2">
         <BarChart
           id="barChart"