UI 精修：全面视觉评审后的集中打磨（浅色/深色双主题复验通过）

- 层次：浅色底色加深（#e8edf5），侧栏白面板与主区对比清晰
- 按钮：secondary 边框加深 + hover 转 accent；禁用态灰字（不再与启用态混淆）
- 方法标签：GET/POST/PUT/… 七色 chip 着色（14% 底 + 方法色文字）
- 设置弹窗：左导航 active 竖条指示、开关 40px + 阴影圆点 + 弹性动画、分组标题层级提升
- 顶栏：主题按钮前补分隔线；只读输入框不再显示聚焦环
- 侧栏：清空历史危险红样式；官网与价格改为 accent 链接
- 登录弹窗提示文案精简
- 评审方式：主界面(浅)25 条 + Mock 弹窗 + 设置弹窗逐条修复；浅/深主题复验截图评审通过

apps/web/src/styles.css

@@ -38,7 +38,7 @@
 
 :root[data-theme="light"] {
   color-scheme: light;
-  --bg: #eef1f6;
+  --bg: #e8edf5;
   --panel: #ffffff;
   --panel-2: #f6f8fb;
   --panel-3: #eef2f8;
@@ -127,6 +127,10 @@
     border-color: var(--accent);
     box-shadow: 0 0 0 3px var(--accent-soft);
   }
+  .ops-input[readonly]:focus {
+    border-color: var(--border-strong);
+    box-shadow: none;
+  }
   .ops-input-sm {
     padding: 0.25rem 0.5rem;
     font-size: 0.75rem;
@@ -156,10 +160,11 @@
   .ops-btn-danger:hover:not(:disabled) { filter: brightness(1.1); }
   .ops-btn-secondary {
     background: var(--panel-2);
-    border-color: var(--border);
+    border-color: var(--border-strong);
     color: var(--text);
   }
-  .ops-btn-secondary:hover:not(:disabled) { border-color: var(--border-strong); background: var(--hover); }
+  .ops-btn-secondary:hover:not(:disabled) { border-color: var(--accent); background: var(--hover); }
+  .ops-btn:disabled { color: var(--text-faint); }
   .ops-btn-ghost {
     background: transparent;
     color: var(--text-dim);
@@ -385,7 +390,18 @@
     color: var(--text-dim);
   }
   .set-side-item:hover { background: var(--hover); color: var(--text); }
+  .set-side-item { position: relative; }
   .set-side-item.active { background: var(--active); color: var(--accent-strong); }
+  .set-side-item.active::before {
+    content: "";
+    position: absolute;
+    left: -1px;
+    top: 8px;
+    bottom: 8px;
+    width: 3px;
+    border-radius: 0 3px 3px 0;
+    background: var(--accent);
+  }
   .set-side-icon {
     @apply grid h-7 w-7 shrink-0 place-items-center rounded-lg;
     background: var(--panel-2);
@@ -402,8 +418,8 @@
     background: var(--panel-2);
   }
   .set-group-title {
-    @apply px-4 pt-3 pb-1 text-[11px] font-semibold uppercase tracking-[0.08em];
+    @apply px-4 pt-3.5 pb-1.5 text-[12px] font-semibold tracking-[0.02em];
-    color: var(--text-faint);
+    color: var(--text-dim);
   }
   .set-row {
     @apply flex items-center gap-4 px-4 py-3;
@@ -413,15 +429,17 @@
 
   /* 开关 */
   .set-toggle {
-    @apply relative h-[22px] w-[38px] rounded-full transition;
+    @apply relative h-[22px] w-[40px] rounded-full transition-colors;
-    background: var(--border);
+    background: var(--border-strong);
   }
-  .set-toggle:hover { opacity: 0.85; }
+  .set-toggle:hover { opacity: 0.9; }
   .set-toggle.on { background: var(--accent); }
   .set-toggle-dot {
-    @apply absolute top-[3px] left-[3px] h-4 w-4 rounded-full bg-white transition;
+    @apply absolute top-[3px] left-[3px] h-4 w-4 rounded-full bg-white;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.15s;
   }
-  .set-toggle.on .set-toggle-dot { transform: translateX(16px); }
+  .set-toggle.on .set-toggle-dot { transform: translateX(18px); }
 
   /* Mock 规则表（随右侧内容区整体滚动，表头吸附） */
   .set-group .ops-hint { margin: 10px 12px 0; }
@@ -474,6 +492,15 @@
     color: var(--accent-strong);
   }
 
+  /* ---------- 方法 chip 着色 ---------- */
+  .ops-chip.ops-method-GET { background: color-mix(in srgb, var(--m-GET) 14%, transparent); color: var(--m-GET); }
+  .ops-chip.ops-method-POST { background: color-mix(in srgb, var(--m-POST) 16%, transparent); color: var(--m-POST); }
+  .ops-chip.ops-method-PUT { background: color-mix(in srgb, var(--m-PUT) 14%, transparent); color: var(--m-PUT); }
+  .ops-chip.ops-method-PATCH { background: color-mix(in srgb, var(--m-PATCH) 14%, transparent); color: var(--m-PATCH); }
+  .ops-chip.ops-method-DELETE { background: color-mix(in srgb, var(--m-DELETE) 14%, transparent); color: var(--m-DELETE); }
+  .ops-chip.ops-method-HEAD { background: color-mix(in srgb, var(--m-HEAD) 14%, transparent); color: var(--m-HEAD); }
+  .ops-chip.ops-method-OPTIONS { background: color-mix(in srgb, var(--m-OPTIONS) 14%, transparent); color: var(--m-OPTIONS); }
+
   /* ---------- 账号 / 空间 ---------- */
   .ops-user-avatar {
     @apply grid h-[18px] w-[18px] shrink-0 place-items-center rounded-full text-[10px] font-bold text-white;

packages/ui/src/components/Sidebar.tsx

@@ -107,7 +107,7 @@ export function Sidebar() {
               </button>
             ))}
             {history.length > 0 && (
-              <button className="ops-btn ops-btn-ghost w-full py-1 text-[11px]" onClick={clearHistory}>
+              <button className="ops-btn ops-btn-ghost ops-danger w-full py-1 text-[11px]" onClick={clearHistory}>
                 清空历史
               </button>
             )}
@@ -125,7 +125,7 @@ export function Sidebar() {
           <Icon name="list-checks" size={13} /> 自动化测试
         </button>
         <a
-          className="ops-btn ops-btn-ghost w-full text-[11px]"
+          className="ops-link flex items-center justify-center gap-1 py-1 text-[11px]"
           href="/home"
           target="_blank"
           rel="noopener noreferrer"

packages/ui/src/components/TopBar.tsx

@@ -273,6 +273,7 @@ export function TopBar() {
 
         <div className="mx-1 h-5 w-px" style={{ background: "var(--border)" }} />
 
+        <div className="mx-1 h-5 w-px" style={{ background: "var(--border)" }} />
         <button
           className="ops-btn ops-btn-ghost"
           onClick={() => setTheme(settings.theme === "dark" ? "light" : "dark")}

packages/ui/src/components/dialogs/AccountDialogs.tsx

@@ -59,7 +59,7 @@ export function AuthDialog() {
       <div className="space-y-3">
         <div className="ops-hint">
           <Icon name="info" size={14} />
-          <span>账号数据保存在本机服务（SQLite），用于个人 / 团队云端空间同步</span>
+          <span>数据保存在本机 SQLite，仅用于云端空间同步</span>
         </div>
         {mode === "register" && (
           <div>