refactor: ♻️ 首页样式优化

src/assets/icons/order.svg

@@ -0,0 +1 @@
+<svg t="1699488416033" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2847" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F15BB5" p-id="2848"></path><path d="M772 432.8l-7.9-63.3v-0.2c-0.1-1-0.4-2.1-0.7-3.1v-0.3l-0.2-0.4-25.7-72.1c-0.3-0.7-0.6-1.5-1-2.2-7-14.4-21.5-23.7-37.5-24h-24.1c-10 0-18.6 7.8-18.9 17.8-0.4 10.5 8 19.1 18.4 19.1H699c1.9 0.3 3.4 1.4 4.2 3.1l13.5 37.9c0.7 1.9 0.4 3.9-0.7 5.6-1.1 1.6-3 2.6-5 2.6h-67.3c-3.5 0-6.2-2.8-6.2-6.2v-24.5c0-67.9-55.1-123-123-123s-123 55.1-123 123v24.5c0 3.5-2.8 6.2-6.2 6.2h-69.8c-3.4 0-6.2-2.8-6.2-6.2 0-0.8 0.2-1.6 0.5-2.3l15.5-36.8c0.7-2.1 2.5-3.5 4.7-3.9h24.1c10 0 18.6-7.8 18.9-17.8 0.4-10.5-8-19.1-18.4-19.1H330c-16.5 0.5-31.3 10.2-38.1 25.3l-30.6 72.1v0.2c-0.2 0.4-0.3 0.8-0.5 1.2v0.4c-0.3 1-0.6 2.1-0.7 3.1l-39 310.8c-6.4 50.5 29.5 96.7 80.1 103 3.8 0.5 7.7 0.7 11.5 0.7h94.5C514.8 718.5 680.7 597.9 772 432.8zM440.7 322.5c0-41 33.3-74.1 74.3-73.8 40.7 0.3 73.3 34.1 73.3 74.8V347c0 3.5-2.8 6.2-6.2 6.2H446.9c-3.5 0-6.2-2.8-6.2-6.2v-24.5z m152.7 257L514 662.4c-2.3 2.4-6.3 2.5-8.7 0.2l-0.2-0.2-79.4-82.9c-15.1-15.1-18.8-38.2-9.3-57.3 13.4-26.8 47.7-36.1 73.3-18.2 2.3 1.6 4.4 3.5 6.4 5.5l9.2 9.2c2.4 2.4 6.3 2.4 8.7 0l9.4-9.4c19.4-19.4 50.8-19.4 70.2 0 19.3 19.4 19.3 50.8-0.2 70.2z" fill="#FFFDF3" p-id="2849"></path><path d="M803.7 691.6c0-3.8-0.3-7.7-0.7-11.4l-31-247.4c-91.3 165.1-257.2 285.7-364.8 351h304.1c51 0 92.4-41.2 92.4-92.2z" fill="#FFFFFF" opacity=".9" p-id="2850"></path></svg>

src/assets/icons/project.svg

@@ -0,0 +1 @@
+<svg t="1699460669940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6619" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#69ADF4" p-id="6620"></path><path d="M526.765394 288.528561m35.292598-10.116657l42.197672-12.096002q35.292598-10.116657 45.409255 25.175942l117.221262 408.933803q10.116657 35.292598-25.175942 45.409255l-42.197672 12.096003q-35.292598 10.116657-45.409255-25.175942l-117.221262-408.933803q-10.116657-35.292598 25.175942-45.409256Z" fill="#FFFFFF" opacity=".4" p-id="6621"></path><path d="M284.134061 263.382697c-20.275679 0-36.713952 16.437475-36.713952 36.713951v43.897117c0 4.408069 3.573225 7.981294 7.981294 7.981293h55.469992c13.443691 0 24.342946 10.898457 24.342946 24.342947S324.315087 400.660951 310.871395 400.660951H255.401403c-4.408069 0-7.981294 3.573225-7.981294 7.981294v316.857365c0 20.276477 16.438273 36.713952 36.713952 36.713952h43.897116c20.275679 0 36.713952-16.437475 36.713952-36.713952V300.096648c0-20.276477-16.438273-36.713952-36.713952-36.713951h-43.897116zM436.576773 263.382697c-20.275679 0-36.713952 16.437475-36.713951 36.713951v122.911926c0 4.408069 3.573225 7.981294 7.981293 7.981293h49.084957c13.443691 0 24.342946 10.898457 24.342947 24.342947S470.372764 479.67576 456.929072 479.67576H407.844115c-4.408069 0-7.981294 3.573225-7.981293 7.981294v237.842556c0 20.276477 16.438273 36.713952 36.713951 36.713952h43.897116c20.275679 0 36.713952-16.437475 36.713952-36.713952V300.096648c0-20.276477-16.438273-36.713952-36.713952-36.713951h-43.897116z" fill="#FFFFFF" p-id="6622"></path></svg>

src/assets/icons/todolist.svg

@@ -0,0 +1 @@
+<svg t="1699460646090" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6462" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#FF8F41" p-id="6463"></path><path d="M436.576773 217.091193m29.530787 0l93.381138 0q29.530787 0 29.530788 29.530787l0 51.08028q0 29.530787-29.530788 29.530788l-93.381138 0q-29.530787 0-29.530787-29.530788l0-51.08028q0-29.530787 29.530787-29.530787Z" fill="#FFFFFF" opacity=".4" p-id="6464"></path><path d="M719.583077 342.1014l40.038959-17.701712c3.507779-1.549169 4.020976-6.315598 0.924234-8.578294l-55.734971-40.715773c-3.096742-2.262697-7.481665-0.324839-7.891106 3.488624l-4.475909 41.54423-58.874014 80.591115 28.157206 20.568592 57.855601-79.196782z" fill="#FFFFFF" opacity=".4" p-id="6465"></path><path d="M512.399065 521.178488m-249.016368 0a249.016368 249.016368 0 1 0 498.032736 0 249.016368 249.016368 0 1 0-498.032736 0Z" fill="#FFFFFF" p-id="6466"></path><path d="M512.399065 348.383476c9.917556 0 17.957911 8.040355 17.957911 17.957911v143.564321l97.432443 55.102055c8.633366 4.882157 11.67344 15.838878 6.791282 24.471445-4.882157 8.633366-15.838878 11.67344-24.471445 6.791283l-106.550272-60.258768A17.957911 17.957911 0 0 1 494.441154 520.380359V366.341387c0-9.917556 8.040355-17.957911 17.957911-17.957911z" fill="#FF8F41" p-id="6467"></path><path d="M513.197194 524.371005m-40.704599 0a40.704599 40.704599 0 1 0 81.409198 0 40.704599 40.704599 0 1 0-81.409198 0Z" fill="#FF8338" p-id="6468"></path></svg>

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 dauCount = ref(0);
-const messageCountOutput = useTransition(messageCount, {
+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-card shadow="never">
-    <el-row class="mb-8">
+      <el-row justify="space-between">
-      <el-card class="w-full">
+        <el-col :span="18" :xs="24">
-        <div class="flex justify-between flex-wrap">
+          <div class="flex h-full items-center">
-          <div class="flex 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]">
+            <div>
-              {{ userStore.user.nickname }}
+              <p>{{ greetings }}</p>
-            </span>
+              <p class="text-sm text-gray">
+                今日天气晴朗，气温在15℃至25℃之间，东南风。
+              </p>
+            </div>
           </div>
+        </el-col>
 
-          <div class="leading-[40px]">
+        <el-col :span="6" :xs="24">
-            {{ greetings }}
+          <div class="flex h-full items-center justify-around">
-          </div>
+            <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-statistic :value="50">
-            <el-link
+              <template #title>
-              target="_blank"
+                <div class="flex items-center">
-              type="danger"
+                  <svg-icon icon-class="todolist" :size="16" />
-              href="https://blog.csdn.net/u013737132/article/details/130191394"
+                  <span class="text-[16px] ml-1">待办</span>
-              >💥官方从零到一文档</el-link
+                </div>
-            >
+              </template>
-            <el-divider direction="vertical" />
+              <template #suffix>/100</template>
-            <el-link
+            </el-statistic>
-              target="_blank"
+
-              type="success"
+            <el-statistic :value="10">
-              href="https://gitee.com/youlaiorg"
+              <template #title>
-              >Gitee</el-link
+                <div class="flex items-center">
-            >
+                  <svg-icon icon-class="project" :size="16" />
-            <el-divider direction="vertical" />
+                  <span class="text-[16px] ml-1">项目</span>
-            <el-link
+                </div>
-              target="_blank"
+              </template>
-              type="primary"
+            </el-statistic>
-              href="https://github.com/youlaitech"
-              >GitHub
-            </el-link>
           </div>
-        </div>
+        </el-col>
-      </el-card>
+      </el-row>
-    </el-row>
+    </el-card>
 
     <!-- 数据卡片 -->
-    <el-row :gutter="40" class="mb-4">
+    <el-row :gutter="40" class="mt-3">
-      <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>
+              <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>
+              <span class="text-[var(--el-text-color-secondary)]">留资数</span>
-              <el-tag>周</el-tag>
+              <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> 总留资数 </span>
-            <span> {{ Math.round(messageCountOutput) }} </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 class="text-[var(--el-text-color-secondary)]">销售额</span>
-                >收入金额</span
+              <el-tag>月</el-tag>
-              >
-              <el-tag type="warning">月</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> 总销售额 </span>
-            <span> {{ Math.round(amountOutput) }} </span>
+            <span> {{ Math.round(amountOutput * 15) }} </span>
           </div>
         </el-card>
       </el-col>
 
-      <!--订单数-->
+      <!--订单量-->
-
+      <el-col :xs="24" :sm="12" :lg="6">
-      <el-col :xs="24" :sm="12" :lg="6" class="mb-4">
         <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="danger">年</el-tag>
+              <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> 总订单量 </span>
-            <span> {{ Math.round(orderCountOutput) }} </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"

vite.config.ts

@@ -172,6 +172,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
         "element-plus/es/components/date-picker/style/css",
         "element-plus/es/components/notification/style/css",
         "element-plus/es/components/image/style/css",
+        "element-plus/es/components/statistic/style/css",
         "@vueuse/core",
         "sortablejs",
         "path-to-regexp",