feat(web): 整体替换 UI 框架为 Ant Design 6 并接入自定义主题

以 antd ConfigProvider + antd-style 承载 zinc 风格自定义主题(明暗双套 token),
button/input/select/notification 用 createStyles 定制;三态主题经
darkAlgorithm 无刷新切换;use-toast 改基于 antd notification;
移除 shadcn/ui 组件目录与 radix 依赖;样式桥接层保证排版与多端布局不变。
This commit is contained in:
2026-09-09 10:35:24 +08:00
parent 5a78de6aa6
commit 87d9bab5dc
23 changed files with 2787 additions and 1608 deletions
+59 -47
View File
@@ -1,6 +1,7 @@
import { useState } from 'react'
import { Link, useNavigate } from 'react-router'
import { ArrowLeft, ArrowRight, CircleAlert, Eye, EyeOff, Lock } from 'lucide-react'
import { useNavigate } from 'react-router'
import { ArrowLeft, ArrowRight, Eye, EyeOff, Lock } from 'lucide-react'
import { Alert, Button, Card, Input } from 'antd'
import { useAuth } from '../lib/auth'
import { ApiError } from '../lib/api'
import { useDocumentTitle } from '../features/site'
@@ -45,28 +46,28 @@ export default function Login() {
<span className="pn-login-wordmark">Pure Note</span>
</div>
<form className="card pn-login-card" onSubmit={onSubmit}>
<h1 className="pn-login-title">管理员登录</h1>
<p className="pn-login-sub">请输入管理密码以继续</p>
<Card className="pn-login-card" styles={{ body: { padding: 0 } }}>
<form onSubmit={onSubmit}>
<h1 className="pn-login-title">管理员登录</h1>
<p className="pn-login-sub">请输入管理密码以继续</p>
<label htmlFor="pn-login-username" className="sr-only">用户名</label>
<input
id="pn-login-username"
className="sr-only"
type="text"
name="username"
autoComplete="username"
value="admin"
readOnly
tabIndex={-1}
/>
<label htmlFor="pn-login-password" className="sr-only">管理密码</label>
<div className="pn-login-field">
<Lock size={16} className="pn-login-icon" aria-hidden />
<label htmlFor="pn-login-username" className="sr-only">用户名</label>
<input
id="pn-login-username"
className="sr-only"
type="text"
name="username"
autoComplete="username"
value="admin"
readOnly
tabIndex={-1}
/>
<label htmlFor="pn-login-password" className="sr-only">管理密码</label>
<Input
id="pn-login-password"
className="pn-login-input"
size="large"
variant="outlined"
type={showPw ? 'text' : 'password'}
name="password"
placeholder="请输入管理密码"
@@ -75,36 +76,47 @@ export default function Login() {
required
value={password}
onChange={(e) => setPassword(e.target.value)}
prefix={<Lock size={16} className="pn-login-lock" aria-hidden />}
suffix={
<Button
type="text"
size="small"
aria-label={showPw ? '隐藏密码' : '显示密码'}
onClick={() => setShowPw((v) => !v)}
icon={showPw ? <EyeOff size={16} /> : <Eye size={16} />}
/>
}
/>
<button
type="button"
className="pn-login-eye"
aria-label={showPw ? '隐藏密码' : '显示密码'}
onClick={() => setShowPw((v) => !v)}
{error && (
<Alert role="alert" type="error" showIcon message={error} className="pn-login-alert" />
)}
<Button
htmlType="submit"
type="primary"
size="large"
block
className="mt-5"
disabled={submitting || password.length === 0}
>
{showPw ? <EyeOff size={16} /> : <Eye size={16} />}
</button>
</div>
<span>{submitting ? '登录中…' : '登录'}</span>
<ArrowRight size={16} />
</Button>
{error && (
<div className="pn-login-error" role="alert">
<CircleAlert size={15} />
<span>{error}</span>
</div>
)}
<p className="pn-login-hint">连续失败将被暂时锁定</p>
</form>
</Card>
<button type="submit" className="btn primary pn-login-submit" disabled={submitting || password.length === 0}>
<span>{submitting ? '登录中…' : '登录'}</span>
<ArrowRight size={16} />
</button>
<p className="pn-login-hint">连续失败将被暂时锁定</p>
</form>
<Link to="/" className="btn ghost pn-login-back">
<ArrowLeft size={14} />
<span>返回博客</span>
</Link>
<Button
type="text"
size="small"
className="pn-login-back"
icon={<ArrowLeft size={14} />}
onClick={() => navigate('/')}
>
返回博客
</Button>
</div>
)
}