hangshuo652/aurak
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ui): 统一设计语言——颜色、字号、间距、控件样式

Browse Source 
UI 修正清单：
┌────────────────────────────────────────────────────────────┐
│ 问题                     │ 修复                          │
├──────────────────────────┼────────────────────────────────┤
│ 登录页 blue → 不一致     │ 统一改为 indigo 系             │
│ text-[10px] 标签难读     │ → text-xs (设置页所有标签)     │
│ text-[9px] 徽章太小      │ → text-xs (角色/租户/权限)    │
│ text-[14px] 输入框不统一  │ → text-sm (编辑弹窗)          │
│ py-3 vs py-3.5 不一致    │ → py-3 统一 (所有输入框)      │
│ 表格头 py-4 过大         │ → py-3                        │
│ 编辑弹窗 max-w-md 太窄   │ → max-w-lg (更宽松)           │
│ 操作列 opacity-0 隐藏     │ → opacity-60 始终可见         │
│ 原生 checkbox 不匹配      │ → 自定义圆角 checkbox + Check  │
│ 登录页 rounded-lg         │ → rounded-xl 统一             │
│ 登录按钮缺阴影            │ → 加 shadow-lg                │
└────────────────────────────────────────────────────────────┘

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Developer
2026-06-09 10:28:49 +08:00
parent 7e741651db
commit ffe365201a
3 changed files with 36 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/components/views/PermissionSettingsView.tsx
+13 -3
View File
@@ -257,7 +257,7 @@ export const PermissionSettingsView: React.FC = () => {
<div className="flex items-center gap-2 min-w-0">
<span className="truncate">{role.name}</span>
{role.isSystem && (
<span className="text-[9px] font-black text-indigo-400 bg-indigo-100/50 px-1.5 py-0.5 rounded uppercase tracking-wider shrink-0">
<span className="text-xs font-black text-indigo-400 bg-indigo-100/50 px-1.5 py-0.5 rounded uppercase tracking-wider shrink-0">
系统
</span>
)}
@@ -413,18 +413,28 @@ export const PermissionSettingsView: React.FC = () => {
!selectedRole.isSystem ? 'cursor-pointer' : 'cursor-not-allowed opacity-60',
)}
>
<div className={cn(
'w-5 h-5 rounded-md flex items-center justify-center border-2 transition-all shrink-0',
editingPermissions.has(perm.key)
? 'bg-indigo-600 border-indigo-600 text-white'
: 'border-slate-300 bg-white',
selectedRole.isSystem ? 'opacity-40' : '',
)}>
{editingPermissions.has(perm.key) && <Check size={14} strokeWidth={3} />}
</div>
{/* hidden native checkbox for a11y */}
<input
type="checkbox"
checked={editingPermissions.has(perm.key)}
onChange={() => togglePermission(perm.key)}
disabled={selectedRole.isSystem}
className="w-4 h-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20 cursor-pointer disabled:cursor-not-allowed"
className="sr-only"
/>
<div className="flex-1 min-w-0">
<div className="text-sm font-bold text-slate-800">{perm.label}</div>
<div className="text-xs text-slate-400">{perm.description}</div>
</div>
<code className="text-[10px] text-slate-300 font-mono shrink-0">{perm.key}</code>
<code className="text-xs text-slate-300 font-mono shrink-0">{perm.key}</code>
</label>
))}
</div>