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

- 层次:浅色底色加深(#e8edf5),侧栏白面板与主区对比清晰
- 按钮:secondary 边框加深 + hover 转 accent;禁用态灰字(不再与启用态混淆)
- 方法标签:GET/POST/PUT/… 七色 chip 着色(14% 底 + 方法色文字)
- 设置弹窗:左导航 active 竖条指示、开关 40px + 阴影圆点 + 弹性动画、分组标题层级提升
- 顶栏:主题按钮前补分隔线;只读输入框不再显示聚焦环
- 侧栏:清空历史危险红样式;官网与价格改为 accent 链接
- 登录弹窗提示文案精简
- 评审方式:主界面(浅)25 条 + Mock 弹窗 + 设置弹窗逐条修复;浅/深主题复验截图评审通过
This commit is contained in:
logan committed 2026-09-18 12:48:47 +08:00
1 parent 0edd3e674a
commit 838f76c21b
4 files changed
+41 -13

No files matched your search

+37 -10
View File
@@ -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;