完善首页基本信息单板块布局

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 {

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>

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));
   }
 }