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/LoginPage.tsx
+4 -4
View File
@@ -35,7 +35,7 @@ const LoginPage: React.FC<LoginPageProps> = ({ onLoginSuccess }) => {
<div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
<div className="max-w-md w-full bg-white rounded-2xl shadow-xl p-8 border border-slate-100">
<div className="flex justify-center mb-6">
<div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center text-blue-600">
<div className="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600">
<ShieldCheck className="w-8 h-8" />
</div>
</div>
@@ -56,7 +56,7 @@ const LoginPage: React.FC<LoginPageProps> = ({ onLoginSuccess }) => {
setUsername(e.target.value);
setError('');
}}
className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition-all"
placeholder={t('usernamePlaceholder') || 'Username'}
/>
</div>
@@ -68,7 +68,7 @@ const LoginPage: React.FC<LoginPageProps> = ({ onLoginSuccess }) => {
setPassword(e.target.value);
setError('');
}}
className="w-full px-4 py-3 rounded-lg border border-slate-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition-all"
className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 outline-none transition-all"
placeholder={t('passwordPlaceholder') || 'Password'}
/>
{error && <p className="text-red-500 text-sm mt-1 ml-1">{error}</p>}
@@ -76,7 +76,7 @@ const LoginPage: React.FC<LoginPageProps> = ({ onLoginSuccess }) => {
<button
type="submit"
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 rounded-lg flex items-center justify-center gap-2 transition-transform active:scale-95"
className="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-3 rounded-xl flex items-center justify-center gap-2 transition-transform active:scale-95 shadow-lg shadow-indigo-200"
>
{t('loginButton')}
<ArrowRight className="w-4 h-4" />