From 5ede0ceb9d81ae621448d4c429d6f342731a1daa Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Sat, 26 Apr 2025 09:25:42 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=89=8B=E6=9C=BA=E7=AB=AF=E6=98=BE=E7=A4=BA=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/index.vue | 111 ++++++++++++++++++++++------------
 1 file changed, 73 insertions(+), 38 deletions(-)

diff --git a/src/views/dashboard/index.vue b/src/views/dashboard/index.vue
index 6687ef95..b62eafe2 100644
--- a/src/views/dashboard/index.vue
+++ b/src/views/dashboard/index.vue
@@ -4,28 +4,29 @@
     <github-corner class="github-corner" />
 
     <el-card shadow="never" class="mt-2">
-      <el-row class="h-80px">
-        <el-col :span="18" :xs="24">
-          <div class="flex-x-start">
-            <img
-              class="w80px h80px rounded-full"
-              :src="userStore.userInfo.avatar + '?imageView2/1/w/80/h/80'"
-            />
-            <div class="ml-5">
-              <p>{{ greetings }}</p>
-              <p class="text-sm text-gray">今日天气晴朗，气温在15℃至25℃之间，东南风。</p>
-            </div>
+      <div class="flex flex-wrap">
+        <!-- 左侧问候语区域 -->
+        <div class="flex-1 flex items-start">
+          <img
+            class="w80px h80px rounded-full"
+            :src="userStore.userInfo.avatar + '?imageView2/1/w/80/h/80'"
+          />
+          <div class="ml-5">
+            <p>{{ greetings }}</p>
+            <p class="text-sm text-gray">今日天气晴朗，气温在15℃至25℃之间，东南风。</p>
           </div>
-        </el-col>
+        </div>
 
-        <el-col :span="6" :xs="24">
-          <el-row class="h-80px flex-y-center" :gutter="10">
-            <el-col :span="10">
-              <div class="font-bold color-#ff9a2e text-sm flex-y-center">
+        <!-- 右侧图标区域 - PC端 -->
+        <div class="hidden sm:block">
+          <div class="flex items-end space-x-6">
+            <!-- 仓库 -->
+            <div>
+              <div class="font-bold color-#ff9a2e text-sm flex items-center">
                 <el-icon class="mr-2px"><Folder /></el-icon>
                 仓库
               </div>
-              <div class="mt-3">
+              <div class="mt-3 whitespace-nowrap">
                 <el-link href="https://gitee.com/youlaiorg/vue3-element-admin" target="_blank">
                   <div class="i-svg:gitee text-lg color-#F76560" />
                 </el-link>
@@ -38,14 +39,15 @@
                   <div class="i-svg:gitcode text-lg color-#FF9A2E" />
                 </el-link>
               </div>
-            </el-col>
+            </div>
 
-            <el-col :span="10">
-              <div class="font-bold color-#4080ff text-sm flex-y-center">
+            <!-- 文档 -->
+            <div>
+              <div class="font-bold color-#4080ff text-sm flex items-center">
                 <el-icon class="mr-2px"><Document /></el-icon>
                 文档
               </div>
-              <div class="mt-3">
+              <div class="mt-3 whitespace-nowrap">
                 <el-link href="https://juejin.cn/post/7228990409909108793" target="_blank">
                   <div class="i-svg:juejin text-lg" />
                 </el-link>
@@ -61,29 +63,62 @@
                   <div class="i-svg:cnblogs text-lg" />
                 </el-link>
               </div>
-            </el-col>
+            </div>
 
-            <el-col :span="4">
-              <div class="font-bold color-#f76560 text-sm flex-y-center">
+            <!-- 视频 -->
+            <div>
+              <div class="font-bold color-#f76560 text-sm flex items-center">
                 <el-icon class="mr-2px"><VideoCamera /></el-icon>
                 视频
               </div>
-              <div class="mt-3">
+              <div class="mt-3 whitespace-nowrap">
                 <el-link href="https://www.bilibili.com/video/BV1eFUuYyEFj" target="_blank">
                   <div class="i-svg:bilibili text-lg" />
                 </el-link>
               </div>
-            </el-col>
-          </el-row>
-        </el-col>
-      </el-row>
+            </div>
+          </div>
+        </div>
+
+        <!-- 移动端图标区域 -->
+        <div class="w-full sm:hidden mt-3">
+          <div class="flex justify-end space-x-4 overflow-x-auto">
+            <!-- 仓库图标 -->
+            <el-link href="https://gitee.com/youlaiorg/vue3-element-admin" target="_blank">
+              <div class="i-svg:gitee text-lg color-#F76560" />
+            </el-link>
+            <el-link href="https://github.com/youlaitech/vue3-element-admin" target="_blank">
+              <div class="i-svg:github text-lg color-#4080FF" />
+            </el-link>
+            <el-link href="https://gitcode.com/youlai/vue3-element-admin" target="_blank">
+              <div class="i-svg:gitcode text-lg color-#FF9A2E" />
+            </el-link>
+
+            <!-- 文档图标 -->
+            <el-link href="https://juejin.cn/post/7228990409909108793" target="_blank">
+              <div class="i-svg:juejin text-lg" />
+            </el-link>
+            <el-link href="https://youlai.blog.csdn.net/article/details/130191394" target="_blank">
+              <div class="i-svg:csdn text-lg" />
+            </el-link>
+            <el-link href="https://www.cnblogs.com/haoxianrui/p/17331952.html" target="_blank">
+              <div class="i-svg:cnblogs text-lg" />
+            </el-link>
+
+            <!-- 视频图标 -->
+            <el-link href="https://www.bilibili.com/video/BV1eFUuYyEFj" target="_blank">
+              <div class="i-svg:bilibili text-lg" />
+            </el-link>
+          </div>
+        </div>
+      </div>
     </el-card>
 
     <!-- 数据统计 -->
     <el-row :gutter="10" class="mt-5">
       <!-- 在线用户数量 -->
-      <el-col :span="8">
-        <el-card shadow="never">
+      <el-col :span="8" :xs="24" class="mb-xs-3">
+        <el-card shadow="never" class="h-full flex flex-col">
           <template #header>
             <div class="flex-x-between">
               <span class="text-gray">在线用户</span>
@@ -91,7 +126,7 @@
             </div>
           </template>
 
-          <div class="flex-x-between mt-2">
+          <div class="flex-x-between mt-2 flex-1">
             <div class="flex-y-center">
               <span class="text-lg transition-all duration-300 hover:scale-110">
                 {{ onlineUserCount }}
@@ -116,7 +151,7 @@
       </el-col>
 
       <!-- 访客数(UV) -->
-      <el-col :span="8">
+      <el-col :span="8" :xs="24" class="mb-xs-3">
         <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
           <template #template>
             <el-card>
@@ -138,7 +173,7 @@
             </el-card>
           </template>
           <template v-if="!visitStatsLoading">
-            <el-card shadow="never">
+            <el-card shadow="never" class="h-full flex flex-col">
               <template #header>
                 <div class="flex-x-between">
                   <span class="text-gray">访客数(UV)</span>
@@ -146,7 +181,7 @@
                 </div>
               </template>
 
-              <div class="flex-x-between mt-2">
+              <div class="flex-x-between mt-2 flex-1">
                 <div class="flex-y-center">
                   <span class="text-lg">{{ Math.round(transitionUvCount) }}</span>
                   <span
@@ -176,7 +211,7 @@
       </el-col>
 
       <!-- 浏览量(PV) -->
-      <el-col :span="8">
+      <el-col :span="8" :xs="24">
         <el-skeleton :loading="visitStatsLoading" :rows="5" animated>
           <template #template>
             <el-card>
@@ -198,7 +233,7 @@
             </el-card>
           </template>
           <template v-if="!visitStatsLoading">
-            <el-card shadow="never">
+            <el-card shadow="never" class="h-full flex flex-col">
               <template #header>
                 <div class="flex-x-between">
                   <span class="text-gray">浏览量(PV)</span>
@@ -206,7 +241,7 @@
                 </div>
               </template>
 
-              <div class="flex-x-between mt-2">
+              <div class="flex-x-between mt-2 flex-1">
                 <div class="flex-y-center">
                   <span class="text-lg">{{ Math.round(transitionPvCount) }}</span>
                   <span