From fba7210fd1b1744938242f16ee9d3f340fcb66b7 Mon Sep 17 00:00:00 2001
From: hezhaohui <hezhaohui0807@163.com>
Date: Tue, 14 Jul 2026 15:39:11 +0800
Subject: [PATCH] =?UTF-8?q?style(frontend):=20=E6=B7=BB=E5=8A=A0=E5=85=A8?=
 =?UTF-8?q?=E5=B1=80=E6=A0=B7=E5=BC=8F=E5=92=8C=20CSS=20=E5=8F=98=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 variables.css，定义颜色、字体等 CSS 变量
- 添加 global.css，全局样式重置和通用样式类

设计风格参考原型暗色主题：
- 背景色：#0E1117（深色）、#151922（面板）
- 强调色：#3FE0A5（绿色）
- 字体：IBM Plex Sans + IBM Plex Mono
---
 frontend/src/styles/global.css    | 132 ++++++++++++++++++++++++++++++
 frontend/src/styles/variables.css |  31 +++++++
 2 files changed, 163 insertions(+)
 create mode 100644 frontend/src/styles/global.css
 create mode 100644 frontend/src/styles/variables.css

diff --git a/frontend/src/styles/global.css b/frontend/src/styles/global.css
new file mode 100644
index 0000000..324f9d7
--- /dev/null
+++ b/frontend/src/styles/global.css
@@ -0,0 +1,132 @@
+@import './variables.css';
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--bg-deep);
+  color: var(--text-hi);
+  font-family: var(--sans);
+  font-size: 14px;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2A3140;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font-family: var(--sans);
+  cursor: pointer;
+}
+
+/* 通用样式类 */
+.mono {
+  font-family: var(--mono);
+}
+
+/* 状态指示器 */
+.dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  display: inline-block;
+  margin-right: 6px;
+}
+
+.dot.ok {
+  background: var(--accent);
+  box-shadow: 0 0 6px #3FE0A599;
+}
+
+.dot.warn {
+  background: var(--warn);
+}
+
+.dot.err {
+  background: var(--err);
+}
+
+.dot.idle {
+  background: var(--text-dim);
+}
+
+/* 状态文本 */
+.status-text {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+}
+
+.status-text.ok {
+  color: var(--accent);
+}
+
+.status-text.warn {
+  color: var(--warn);
+}
+
+.status-text.err {
+  color: var(--err);
+}
+
+.status-text.idle {
+  color: var(--text-dim);
+}
+
+/* 标签 */
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--line);
+  color: var(--text-mid);
+}
+
+/* 进度条 */
+.bar-wrap {
+  width: 90px;
+  height: 5px;
+  background: #262C38;
+  border-radius: 3px;
+  overflow: hidden;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 8px;
+}
+
+.bar-fill {
+  height: 100%;
+  border-radius: 3px;
+  background: var(--accent);
+}
+
+.bar-fill.warn {
+  background: var(--warn);
+}
+
+.bar-fill.err {
+  background: var(--err);
+}
diff --git a/frontend/src/styles/variables.css b/frontend/src/styles/variables.css
new file mode 100644
index 0000000..30748e4
--- /dev/null
+++ b/frontend/src/styles/variables.css
@@ -0,0 +1,31 @@
+:root {
+  /* 背景色 */
+  --bg-deep: #0E1117;
+  --bg-panel: #151922;
+  --bg-panel-2: #1B202B;
+
+  /* 边框色 */
+  --line: #262C38;
+  --line-soft: #1E2330;
+
+  /* 文字色 */
+  --text-hi: #E8EBF1;
+  --text-mid: #9AA3B5;
+  --text-dim: #5C657A;
+
+  /* 强调色 */
+  --accent: #3FE0A5;
+  --accent-dim: #1F6B52;
+
+  /* 状态色 */
+  --warn: #F2B544;
+  --err: #F2554F;
+  --info: #5B9DF2;
+
+  /* 圆角 */
+  --radius: 6px;
+
+  /* 字体 */
+  --mono: 'IBM Plex Mono', monospace;
+  --sans: 'IBM Plex Sans', sans-serif;
+}