From 838f76c21be05fd168491ad6fc107ef72b2f8ff9 Mon Sep 17 00:00:00 2001 From: logan Date: Fri, 18 Sep 2026 12:48:47 +0800 Subject: [PATCH] =?UTF-8?q?UI=20=E7=B2=BE=E4=BF=AE=EF=BC=9A=E5=85=A8?= =?UTF-8?q?=E9=9D=A2=E8=A7=86=E8=A7=89=E8=AF=84=E5=AE=A1=E5=90=8E=E7=9A=84?= =?UTF-8?q?=E9=9B=86=E4=B8=AD=E6=89=93=E7=A3=A8=EF=BC=88=E6=B5=85=E8=89=B2?= =?UTF-8?q?/=E6=B7=B1=E8=89=B2=E5=8F=8C=E4=B8=BB=E9=A2=98=E5=A4=8D?= =?UTF-8?q?=E9=AA=8C=E9=80=9A=E8=BF=87=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 层次：浅色底色加深（#e8edf5），侧栏白面板与主区对比清晰 - 按钮：secondary 边框加深 + hover 转 accent；禁用态灰字（不再与启用态混淆） - 方法标签：GET/POST/PUT/… 七色 chip 着色（14% 底 + 方法色文字） - 设置弹窗：左导航 active 竖条指示、开关 40px + 阴影圆点 + 弹性动画、分组标题层级提升 - 顶栏：主题按钮前补分隔线；只读输入框不再显示聚焦环 - 侧栏：清空历史危险红样式；官网与价格改为 accent 链接 - 登录弹窗提示文案精简 - 评审方式：主界面(浅)25 条 + Mock 弹窗 + 设置弹窗逐条修复；浅/深主题复验截图评审通过 --- apps/web/src/styles.css | 47 +++++++++++++++---- packages/ui/src/components/Sidebar.tsx | 4 +- packages/ui/src/components/TopBar.tsx | 1 + .../src/components/dialogs/AccountDialogs.tsx | 2 +- 4 files changed, 41 insertions(+), 13 deletions(-) diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css index c7fb8f2..276f1bc 100644 --- a/apps/web/src/styles.css +++ b/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]; - color: var(--text-faint); + @apply px-4 pt-3.5 pb-1.5 text-[12px] font-semibold tracking-[0.02em]; + 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; - background: var(--border); + @apply relative h-[22px] w-[40px] rounded-full transition-colors; + 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; diff --git a/packages/ui/src/components/Sidebar.tsx b/packages/ui/src/components/Sidebar.tsx index fa5bbb8..a4b420f 100644 --- a/packages/ui/src/components/Sidebar.tsx +++ b/packages/ui/src/components/Sidebar.tsx @@ -107,7 +107,7 @@ export function Sidebar() { ))} {history.length > 0 && ( - )} @@ -125,7 +125,7 @@ export function Sidebar() { 自动化测试 +