Merge pull request #2152 from Azir-11/dev2.8.8

pixelmaxQm · web-flow · commit a758221aec7e · 2025-12-24T00:30:19.000+08:00
优化仪表盘组件样式，调整各个子组件的布局和样式，提升视觉效果
diff --git a/web/src/view/dashboard/components/card.vue b/web/src/view/dashboard/components/card.vue
@@ -5,18 +5,21 @@
 
 <template>
   <div
-    class="bg-white dark:bg-slate-900 text-gray-800 dark:text-gray-400 rounded shadow"
+    class="rounded-xl border border-black/10 bg-white text-black/80 dark:border-white/10 dark:bg-black dark:text-white/80"
     :class="[customClass || '', withoutPadding ? 'p-0' : 'p-4']"
   >
     <div v-if="title" class="flex justify-between items-center">
-      <div class="text-base font-bold">
+      <div class="text-sm font-semibold tracking-tight text-black dark:text-white">
         {{ title }}
       </div>
-      <div v-if="showAction" class="text-sm text-active cursor-pointer">
+      <div
+        v-if="showAction"
+        class="text-xs text-black/60 dark:text-white/60 hover:text-active cursor-pointer"
+      >
         查看更多
       </div>
     </div>
-    <div class="mt-2">
+    <div :class="title ? 'mt-3' : ''">
       <slot />
     </div>
   </div>
diff --git a/web/src/view/dashboard/components/charts-content-numbers.vue b/web/src/view/dashboard/components/charts-content-numbers.vue
@@ -24,8 +24,11 @@
       default: '128px'
     }
   })
+  const axisTextColor = computed(() => {
+    return appStore.isDark ? 'rgba(255,255,255,0.70)' : 'rgba(0,0,0,0.70)'
+  })
   const dotColor = computed(() => {
-    return appStore.isDark ? '#333' : '#E5E8EF'
+    return appStore.isDark ? 'rgba(255,255,255,0.12)' : 'rgba(0,0,0,0.08)'
   })
   const graphicFactory = (side) => {
     return {
@@ -35,7 +38,7 @@
       style: {
         text: '',
         textAlign: 'center',
-        fill: '#4E5969',
+        fill: axisTextColor.value,
         fontSize: 12
       }
     }
@@ -69,7 +72,7 @@
         data: xAxis.value,
         boundaryGap: false,
         axisLabel: {
-          color: '#4E5969',
+          color: axisTextColor.value,
           formatter(value, idx) {
             if (idx === 0) return ''
             if (idx === xAxis.value.length - 1) return ''
diff --git a/web/src/view/dashboard/components/charts-people-numbers.vue b/web/src/view/dashboard/components/charts-people-numbers.vue
@@ -38,7 +38,7 @@
       style: {
         text: '',
         textAlign: 'center',
-        fill: '#4E5969',
+        fill: appStore.isDark ? '#FFFFFF' : '#000000',
         fontSize: 12
       }
     }
diff --git a/web/src/view/dashboard/components/charts.vue b/web/src/view/dashboard/components/charts.vue
@@ -6,18 +6,18 @@
 <template>
   <div class="">
     <div class="flex items-center justify-between mb-2">
-      <div v-if="title" class="font-bold">
+      <div v-if="title" class="text-sm font-semibold tracking-tight text-black dark:text-white">
         {{ title }}
       </div>
       <slot v-else name="title" />
     </div>
     <div class="w-full relative">
       <div v-if="type !== 4">
-        <div class="mt-4 text-gray-600 text-3xl font-mono">
+        <div class="mt-4 text-3xl font-mono text-black dark:text-white">
           <el-statistic :value="268500" />
         </div>
-        <div class="mt-2 text-green-600 text-sm font-bold font-mono">
-          +80% <el-icon><TopRight /></el-icon>
+        <div class="mt-2 text-xs font-mono text-black/60 dark:text-white/60">
+          +80% <el-icon class="align-middle"><TopRight /></el-icon>
         </div>
       </div>
       <div class="absolute top-0 right-2 w-[50%] h-20">
diff --git a/web/src/view/dashboard/components/notice.vue b/web/src/view/dashboard/components/notice.vue
@@ -8,13 +8,15 @@
     <div
       v-for="(item, index) in notices"
       :key="index"
-      class="flex items-center mb-1.5 gap-3"
+      class="flex items-center gap-3 py-1"
     >
-      <el-tag :type="item.type" size="small">
+      <div
+        class="shrink-0 rounded-full border border-black/10 px-2 py-0.5 text-[11px] leading-4 text-black/70 dark:border-white/10 dark:text-white/70"
+      >
         {{ item.typeTitle }}
-      </el-tag>
+      </div>
       <el-tooltip effect="light" :content="item.title" placement="top">
-        <div class="text-xs text-gray-700 dark:text-gray-300 line-clamp-1">
+        <div class="min-w-0 text-xs text-black/70 dark:text-white/70 line-clamp-1">
           {{ item.title }}
         </div>
       </el-tooltip>
diff --git a/web/src/view/dashboard/components/pluginTable.vue b/web/src/view/dashboard/components/pluginTable.vue
@@ -9,9 +9,11 @@
       <el-table-column prop="ranking" label="排名" width="80" align="center" />
       <el-table-column prop="title" label="插件标题" show-overflow-tooltip>
         <template #default="{ row }">
-          <a class="text-active" :href="row.link" target="_blank">{{
-            row.title
-          }}</a>
+          <a
+            class="text-black dark:text-white underline underline-offset-4 decoration-black/20 dark:decoration-white/20 hover:text-active"
+            :href="row.link"
+            target="_blank"
+          >{{ row.title }}</a>
         </template>
       </el-table-column>
       <el-table-column prop="click_num" label="关注度" width="100" />
@@ -27,38 +29,45 @@
       title: '组织管理插件:更方便管理组织，分配资源权限。',
       click_num: 523,
       hot: 263,
-      link: 'https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=36'
+      link: 'https://plugin.gin-vue-admin.com/details/36'
     },
     {
       ranking: 2,
       title:
         'Kubernetes容器管理:，Kubernetes 原生资源管理，提供炫酷的YAML 编辑，Pod 终端，方便运维兄弟管理k8s资源',
       click_num: 416,
       hot: 223,
-      link: 'https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=42'
+      link: 'https://plugin.gin-vue-admin.com/details/42'
     },
     {
       ranking: 3,
       title:
         '定时任务配置化管理:本插件用于对系统内部的定时任务进行配置化管理，可以配置自定义的函数和HTTP，可以配置cron和remark等等',
       click_num: 337,
       hot: 176,
-      link: 'https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=67'
+      link: 'https://plugin.gin-vue-admin.com/details/67'
     },
     {
       ranking: 4,
       title:
         '官网CMS系统：基于Gin-Vue-Admin 和 插件市场客户端开发基座开发的企业官网类（cms）系统',
       click_num: 292,
       hot: 145,
-      link: 'https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=69'
+      link: 'https://plugin.gin-vue-admin.com/details/69'
     },
     {
       ranking: 5,
       title: '微信支付插件：提供扫码支付功能（需自行对接业务）',
       click_num: 173,
       hot: 110,
-      link: 'https://plugin.gin-vue-admin.com/#/layout/newPluginInfo?id=28'
+      link: 'https://plugin.gin-vue-admin.com/details/28'
+    },
+    {
+      ranking: 6,
+      title: '线上版本更新智能检测【自动版】',
+      click_num: 236,
+      hot: 132,
+      link: 'https://plugin.gin-vue-admin.com/details/112'
     }
   ]
 </script>
diff --git a/web/src/view/dashboard/components/quickLinks.vue b/web/src/view/dashboard/components/quickLinks.vue
@@ -3,37 +3,40 @@
     @date: 2024/5/8
 !-->
 <template>
-  <div class="mt-8 w-full">
-    <div class="grid grid-cols-2 md:grid-cols-3 3xl:grid-cols-4">
+  <div class="mt-4 w-full">
+    <div class="text-xs tracking-wide text-black/60 dark:text-white/60">快捷入口</div>
+    <div class="mt-3 grid grid-cols-3 gap-3 sm:grid-cols-4">
       <div
         v-for="(item, index) in shortcuts"
         :key="index"
-        class="flex flex-col items-center mb-3 group cursor-pointer"
+        class="flex flex-col items-center group cursor-pointer"
         @click="toPath(item)"
       >
         <div
-          class="w-8 h-8 rounded bg-gray-200 dark:bg-slate-500 flex items-center justify-center group-hover:bg-blue-400 group-hover:text-white"
+          class="w-10 h-10 rounded-lg border border-black/10 dark:border-white/10 flex items-center justify-center text-black/70 dark:text-white/70 group-hover:bg-black group-hover:text-white dark:group-hover:bg-white dark:group-hover:text-black transition-colors"
         >
           <el-icon><component :is="item.icon" /></el-icon>
         </div>
-        <div class="text-xs mt-2 text-gray-700 dark:text-gray-300">
+        <div class="mt-2 text-[11px] text-black/70 dark:text-white/70">
           {{ item.title }}
         </div>
       </div>
     </div>
-    <div class="grid grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 mt-8">
+
+    <div class="mt-6 text-xs tracking-wide text-black/60 dark:text-white/60">最近访问</div>
+    <div class="mt-3 grid grid-cols-3 gap-3 sm:grid-cols-4">
       <div
         v-for="(item, index) in recentVisits"
         :key="index"
-        class="flex flex-col items-center mb-3 group cursor-pointer"
+        class="flex flex-col items-center group cursor-pointer"
         @click="openLink(item)"
       >
         <div
-          class="w-8 h-8 rounded bg-gray-200 dark:bg-slate-500 flex items-center justify-center group-hover:bg-blue-400 group-hover:text-white"
+          class="w-10 h-10 rounded-lg border border-black/10 dark:border-white/10 flex items-center justify-center text-black/70 dark:text-white/70 group-hover:bg-black group-hover:text-white dark:group-hover:bg-white dark:group-hover:text-black transition-colors"
         >
           <el-icon><component :is="item.icon" /></el-icon>
         </div>
-        <div class="text-xs mt-2 text-gray-700 dark:text-gray-300">
+        <div class="mt-2 text-[11px] text-black/70 dark:text-white/70">
           {{ item.title }}
         </div>
       </div>
diff --git a/web/src/view/dashboard/components/wiki.vue b/web/src/view/dashboard/components/wiki.vue
@@ -9,7 +9,7 @@
       v-for="item in wikis"
       :key="item.url"
       :href="item.url"
-      class="text-sm text-gray-700 dark:text-gray-300 no-underline hover:text-active"
+      class="text-sm text-black/70 dark:text-white/70 no-underline hover:text-black dark:hover:text-white"
       target="_blank"
     >
       {{ item.title }}
diff --git a/web/src/view/dashboard/index.vue b/web/src/view/dashboard/index.vue
@@ -1,64 +1,70 @@
 <template>
   <div
-    class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-7 py-2 gap-4 md:gap-2 gva-container2"
+    class="h-full gva-container2 overflow-auto bg-white text-black dark:bg-black dark:text-white"
   >
-    <gva-card custom-class="col-span-1 lg:col-span-2 ">
-      <gva-chart :type="1" title="访问人数" />
-    </gva-card>
-    <gva-card custom-class="col-span-1 lg:col-span-2  ">
-      <gva-chart :type="2" title="新增客户" />
-    </gva-card>
-    <gva-card custom-class="col-span-1 lg:col-span-2 ">
-      <gva-chart :type="3" title="解决数量" />
-    </gva-card>
-    <gva-card
-      title="快捷功能"
-      show-action
-      custom-class="col-start-1 md:col-start-3 lg:col-start-7 row-span-2 "
-    >
-      <gva-quick-link />
-    </gva-card>
-    <gva-card
-      title="内容数据"
-      custom-class="col-span-1 md:col-span-2 md:row-start-2 lg:col-span-6 col-start-1 row-span-2"
-    >
-      <gva-chart :type="4" />
-    </gva-card>
-    <gva-card
-      title="文档"
-      show-action
-      custom-class="md:row-start-8 md:col-start-3 lg:row-start-3 lg:col-start-7"
-    >
-      <gva-wiki />
-    </gva-card>
+    <div class="p-4 lg:p-6">
+      <div class="mb-5 flex flex-col gap-1 sm:flex-row sm:items-end sm:justify-between">
+        <div>
+          <div class="text-lg font-semibold tracking-tight">仪表盘</div>
+          <div class="text-xs text-black/60 dark:text-white/60">概览 · {{ today }}</div>
+        </div>
+      </div>
 
-    <gva-card
-      title="最新更新"
-      custom-class="col-span-1 md:col-span-3 row-span-2"
-    >
-      <gva-table />
-    </gva-card>
-    <gva-card
-      title="最新插件"
-      custom-class="col-span-1 md:col-span-3 row-span-2"
-    >
-      <gva-plugin-table />
-    </gva-card>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
+        <gva-card>
+          <gva-chart :type="1" title="访问人数" />
+        </gva-card>
+        <gva-card>
+          <gva-chart :type="2" title="新增客户" />
+        </gva-card>
+        <gva-card>
+          <gva-chart :type="3" title="解决数量" />
+        </gva-card>
+      </div>
 
-    <gva-card title="公告" show-action custom-class="col-span-1 lg:col-start-7">
-      <gva-notice />
-    </gva-card>
+      <div class="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-12 items-start">
+        <div class="grid grid-cols-1 gap-4 xl:col-span-8 self-start content-start">
+          <gva-card title="内容数据">
+            <gva-chart :type="4" />
+          </gva-card>
 
-    <gva-card
-      without-padding
-      custom-class="overflow-hidden lg:h-40 col-span-1 md:col-start-2 md:col-span-1 lg:col-start-7"
-    >
-      <gva-banner />
-    </gva-card>
+          <div class="grid grid-cols-1 gap-4">
+            <gva-card title="最新插件">
+              <gva-plugin-table />
+            </gva-card>
+          </div>
+
+          <div class="grid grid-cols-1 gap-4">
+            <gva-card title="最新更新">
+              <gva-table />
+            </gva-card>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 gap-4 xl:col-span-4 self-start content-start">
+          <gva-card title="快捷功能" show-action>
+            <gva-quick-link />
+          </gva-card>
+          <gva-card title="公告" show-action>
+            <gva-notice />
+          </gva-card>
+          <gva-card title="文档" show-action>
+            <gva-wiki />
+          </gva-card>
+          <gva-card
+            without-padding
+            custom-class="overflow-hidden h-44 sm:h-52 xl:h-56"
+          >
+            <gva-banner />
+          </gva-card>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+  import { computed } from 'vue'
   import {
     GvaPluginTable,
     GvaTable,
@@ -69,6 +75,19 @@
     GvaCard,
     GvaBanner
   } from './components'
+
+  const today = computed(() => {
+    try {
+      const d = new Date()
+      return d.toLocaleDateString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit'
+      })
+    } catch (e) {
+      return new Date().toISOString().slice(0, 10)
+    }
+  })
   defineOptions({
     name: 'Dashboard'
   })

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`	`style: {`
`39`	`39`	`text: '',`
`40`	`40`	`textAlign: 'center',`
`41`		`- fill: '#4E5969',`
	`41`	`+ fill: appStore.isDark ? '#FFFFFF' : '#000000',`
`42`	`42`	`fontSize: 12`
`43`	`43`	`}`
`44`	`44`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`v-for="item in wikis"`
`10`	`10`	`:key="item.url"`
`11`	`11`	`:href="item.url"`
`12`		`- class="text-sm text-gray-700 dark:text-gray-300 no-underline hover:text-active"`
	`12`	`+ class="text-sm text-black/70 dark:text-white/70 no-underline hover:text-black dark:hover:text-white"`
`13`	`13`	`target="_blank"`
`14`	`14`	`>`
`15`	`15`	`{{ item.title }}`