From 352b85405d8cca155a7868fdd017550695a1d964 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=99=B4=E5=A4=A9?= <keh5@vip.qq.com>
Date: Thu, 26 Feb 2026 23:28:24 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=9A=97=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=E7=BC=BA=E5=A4=B1=E5=8F=98=E9=87=8F=E5=92=8C?=
 =?UTF-8?q?=20CSS=20=E9=80=89=E6=8B=A9=E5=99=A8=E5=86=B2=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- variables.css: 暗色主题添加缺失的 --border-focus
- pages.css: 修复 .editor-area 从 flex 容器改为正确的 textarea 样式
- components.css: 添加 .stat-card-meta 类
- dashboard.js: 内联样式替换为 CSS 类
---
 src/pages/dashboard.js   | 12 ++++--------
 src/style/components.css |  6 ++++++
 src/style/pages.css      | 16 +++++++++++-----
 src/style/variables.css  |  1 +
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/pages/dashboard.js b/src/pages/dashboard.js
index d76dee4..c552ce4 100644
--- a/src/pages/dashboard.js
+++ b/src/pages/dashboard.js
@@ -64,9 +64,7 @@ function renderStatCards(page, services, version) {
         <span class="status-dot ${gw?.running ? 'running' : 'stopped'}"></span>
       </div>
       <div class="stat-card-value">${gw?.running ? '运行中' : '已停止'}</div>
-      <div style="font-size:var(--font-size-xs);color:var(--text-tertiary);margin-top:4px">
-        ${gw?.pid ? 'PID: ' + gw.pid : ''}
-      </div>
+      <div class="stat-card-meta">${gw?.pid ? 'PID: ' + gw.pid : ''}</div>
     </div>
     <div class="stat-card">
       <div class="stat-card-header">
@@ -74,7 +72,7 @@ function renderStatCards(page, services, version) {
         <span class="status-dot ${guardian?.running ? 'running' : 'stopped'}"></span>
       </div>
       <div class="stat-card-value">${guardian?.running ? '运行中' : '已停止'}</div>
-      <div style="font-size:var(--font-size-xs);color:var(--text-tertiary);margin-top:4px">健康监控</div>
+      <div class="stat-card-meta">健康监控</div>
     </div>
     <div class="stat-card">
       <div class="stat-card-header">
@@ -82,16 +80,14 @@ function renderStatCards(page, services, version) {
         <span class="status-dot ${watchdog?.running ? 'running' : 'stopped'}"></span>
       </div>
       <div class="stat-card-value">${watchdog?.running ? '运行中' : '已停止'}</div>
-      <div style="font-size:var(--font-size-xs);color:var(--text-tertiary);margin-top:4px">看门狗</div>
+      <div class="stat-card-meta">看门狗</div>
     </div>
     <div class="stat-card">
       <div class="stat-card-header">
         <span class="stat-card-label">版本</span>
       </div>
       <div class="stat-card-value">${version.current || '未知'}</div>
-      <div style="font-size:var(--font-size-xs);color:var(--text-tertiary);margin-top:4px">
-        服务 ${runningCount}/${services.length} 运行中
-      </div>
+      <div class="stat-card-meta">服务 ${runningCount}/${services.length} 运行中</div>
     </div>
   `
 }
diff --git a/src/style/components.css b/src/style/components.css
index f6888ab..7ada37f 100644
--- a/src/style/components.css
+++ b/src/style/components.css
@@ -44,6 +44,12 @@
   font-weight: 700;
 }
 
+.stat-card-meta {
+  font-size: var(--font-size-xs);
+  color: var(--text-tertiary);
+  margin-top: 4px;
+}
+
 /* 状态点 */
 .status-dot {
   width: 8px;
diff --git a/src/style/pages.css b/src/style/pages.css
index f4de68e..7274bf9 100644
--- a/src/style/pages.css
+++ b/src/style/pages.css
@@ -145,11 +145,17 @@
 .file-item.active { background: var(--accent-muted); color: var(--accent-hover); }
 
 .editor-area {
-  background: var(--bg-card);
-  border: 1px solid var(--border-primary);
-  border-radius: var(--radius-lg);
-  display: flex;
-  flex-direction: column;
+  flex: 1;
+  width: 100%;
+  background: transparent;
+  border: none;
+  resize: none;
+  outline: none;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  line-height: 1.7;
+  padding: var(--space-lg);
 }
 
 .editor-toolbar {
diff --git a/src/style/variables.css b/src/style/variables.css
index bf41a83..bd17278 100644
--- a/src/style/variables.css
+++ b/src/style/variables.css
@@ -48,6 +48,7 @@
 
   --border-primary: rgba(255, 255, 255, 0.08);
   --border-secondary: rgba(255, 255, 255, 0.04);
+  --border-focus: rgba(129, 140, 248, 0.5);
 
   --text-primary: #e4e4e7;
   --text-secondary: #a1a1aa;