From 040ad2ed49bf9df220d10d4919fa6aed7c2d0218 Mon Sep 17 00:00:00 2001
From: xuans <likb_blue@163.com>
Date: Fri, 25 Sep 2026 15:41:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E9=A6=96=E9=A1=B5=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E4=BF=A1=E6=81=AF=E5=8D=95=E6=9D=BF=E5=9D=97=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/Dashboard/Dashboard.css    | 13 +++--
 frontend/src/views/Dashboard/Dashboard.vue    | 47 +++++++++----------
 .../src/views/Dashboard/DashboardLayout.css   | 10 ++--
 3 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/frontend/src/views/Dashboard/Dashboard.css b/frontend/src/views/Dashboard/Dashboard.css
index d1bc60b..0d2e990 100644
--- a/frontend/src/views/Dashboard/Dashboard.css
+++ b/frontend/src/views/Dashboard/Dashboard.css
@@ -171,29 +171,28 @@ h2 {
 .overview-domain-field strong {
   font-size: 14px;
 }
-.metrics-grid {
+.overview-details-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 14px;
-  margin-bottom: 18px;
 }
-.metric-card,
+.overview-detail-card,
 .panel {
   border: 1px solid #e2e8f2;
   border-radius: 20px;
   background: rgba(255, 255, 255, 0.86);
   box-shadow: 0 10px 30px rgba(31, 50, 87, 0.04);
 }
-.metric-card {
+.overview-detail-card {
   padding: 22px;
 }
-.metric-card span,
+.overview-detail-card span,
 .domain-row span,
 .muted {
   color: #7a879d;
   font-size: 13px;
 }
-.metric-card strong {
+.overview-detail-card strong {
   display: block;
   margin-top: 13px;
   font-size: 28px;
@@ -615,7 +614,7 @@ code {
   .overview-domain-row {
     grid-template-columns: 1fr;
   }
-  .metrics-grid {
+  .overview-details-grid {
     grid-template-columns: repeat(2, 1fr);
   }
   .operation-columns {
diff --git a/frontend/src/views/Dashboard/Dashboard.vue b/frontend/src/views/Dashboard/Dashboard.vue
index 2d607f3..72700f5 100644
--- a/frontend/src/views/Dashboard/Dashboard.vue
+++ b/frontend/src/views/Dashboard/Dashboard.vue
@@ -241,30 +241,29 @@ const { activeSection, activeLabel, sections, selectSection } = useDashboardNavi
           </div>
         </article>
       </div>
-    </section>
-
-    <section class="metrics-grid">
-      <article class="metric-card">
-        <span>服务版本</span><strong>{{ status?.version || "—" }}</strong>
-      </article>
-      <article class="metric-card">
-        <span>数据库</span
-        ><strong>{{
-          displayLabel(
-            { sqlite: "SQLite", mysql: "MySQL" },
-            status?.database_driver,
-          )
-        }}</strong>
-      </article>
-      <article class="metric-card">
-        <span>HTTPS 模式</span
-        ><strong>{{
-          displayLabel(httpsModeLabels, status?.https_mode)
-        }}</strong>
-      </article>
-      <article class="metric-card">
-        <span>托管域名</span><strong>{{ domains.length }}</strong>
-      </article>
+      <div class="overview-details-grid">
+        <article class="overview-detail-card">
+          <span>服务版本</span>
+          <strong>{{ status?.version || "—" }}</strong>
+        </article>
+        <article class="overview-detail-card">
+          <span>数据库</span>
+          <strong>{{
+            displayLabel(
+              { sqlite: "SQLite", mysql: "MySQL" },
+              status?.database_driver,
+            )
+          }}</strong>
+        </article>
+        <article class="overview-detail-card">
+          <span>HTTPS 模式</span>
+          <strong>{{ displayLabel(httpsModeLabels, status?.https_mode) }}</strong>
+        </article>
+        <article class="overview-detail-card">
+          <span>托管域名</span>
+          <strong>{{ domains.length }} 个</strong>
+        </article>
+      </div>
     </section>
 
     </div>
diff --git a/frontend/src/views/Dashboard/DashboardLayout.css b/frontend/src/views/Dashboard/DashboardLayout.css
index 649d97c..0a52ee2 100644
--- a/frontend/src/views/Dashboard/DashboardLayout.css
+++ b/frontend/src/views/Dashboard/DashboardLayout.css
@@ -91,16 +91,16 @@
   padding: 24px;
 }
 
-.overview-section > .metrics-grid {
-  margin: 0;
+.overview-details-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
-.metric-card {
+.overview-detail-card {
   padding: 16px 18px;
   border-radius: 14px;
 }
 
-.metric-card strong {
+.overview-detail-card strong {
   margin-top: 8px;
   font-size: 20px;
   overflow-wrap: anywhere;
@@ -212,7 +212,7 @@
     grid-template-columns: 1fr;
   }
 
-  .metrics-grid {
+  .overview-details-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }