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:
+59
-47
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user