onionanime/cyh-tk-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 优化后台整体UI风格与组件样式

Browse Source 
1.  新增并配置全局颜色、阴影、圆角等主题变量
2.  统一各页面卡片、表单、按钮等组件的样式规范
3.  优化登录页、个人中心、仪表盘等页面的布局与视觉效果
4.  添加全局滚动条样式与元素过渡动画
This commit is contained in:
zhxiao1124
2026-07-02 18:05:46 +08:00
parent 96eaa810f3
commit 718d1c7aac
12 changed files with 242 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Profile/components/ProfileInfoList.tsx
View File

@@ -13,9 +13,9 @@ export function ProfileInfoList({ profile }: ProfileInfoListProps) {
function ProfileInfoItem({ label, value }: ProfileInfoItemProps) {
return (
<div className="rounded-lg border border-line bg-panel p-3.5">
<span className="mb-2 block text-[13px] text-muted">{label}</span>
<strong className="break-words font-medium text-ink">{value}</strong>
<div className="rounded-xl border border-line/60 bg-canvas/50 p-4 transition-all duration-200 hover:bg-canvas">
<span className="mb-2 block text-[12px] font-medium uppercase tracking-wider text-muted">{label}</span>
<strong className="break-words text-[15px] font-semibold text-ink">{value}</strong>
</div>
);
}

10
src/Profile/components/ProfileSummary.tsx
View File

@@ -3,11 +3,13 @@ import type { ProfileSummaryProps } from "../interface";
export function ProfileSummary({ profile }: ProfileSummaryProps) {
return (
<div className="mb-6 flex items-center gap-4">
<Avatar size={56}>{profile?.username?.slice(0, 1).toUpperCase() || "A"}</Avatar>
<div className="mb-6 flex items-center gap-4 rounded-xl bg-gradient-to-br from-brand/5 to-brand/10 p-5">
<Avatar size={60} className="!bg-brand !text-white !text-xl !font-bold !shadow-lg !shadow-brand/30">
{profile?.username?.slice(0, 1).toUpperCase() || "A"}
</Avatar>
<div>
<h2 className="mb-1.5 mt-0 text-[22px]">{profile?.nickname || profile?.username || "管理员"}</h2>
<p className="m-0 text-muted">{profile?.email || "未设置邮箱"}</p>
<h2 className="mb-1 mt-0 text-xl font-semibold text-ink">{profile?.nickname || profile?.username || "管理员"}</h2>
<p className="m-0 text-[13px] text-muted">{profile?.email || "未设置邮箱"}</p>
</div>
</div>
);

62
src/Profile/index.tsx
View File

@@ -65,36 +65,38 @@ function ProfilePage() {
};
return (
<div className="grid items-start gap-4 min-[901px]:grid-cols-[minmax(0,1fr)_420px]">
<Card className="section-card min-[901px]:row-span-2" title="个人中心" loading={loading}>
<ProfileSummary profile={profile} />
<ProfileInfoList profile={profile} />
</Card>
<Card className="section-card" title="修改个人信息">
<Form form={form} layout="vertical" onSubmit={updateProfile}>
<Form.Item label="姓名" field="nickname">
<Input placeholder="请输入姓名" />
</Form.Item>
<Form.Item label="邮箱" field="email" rules={[{ type: 'email', message: '请输入正确的邮箱地址' }]}>
<Input placeholder="请输入邮箱" />
</Form.Item>
<Button type="primary" htmlType="submit" loading={saving}>保存修改</Button>
</Form>
</Card>
<Card className="section-card" title="修改密码">
<Form form={passwordForm} layout="vertical" onSubmit={changePassword}>
<Form.Item label="旧密码" field="oldPassword" rules={[{ required: true }]}>
<Input.Password placeholder="请输入旧密码" />
</Form.Item>
<Form.Item label="新密码" field="newPassword" rules={[{ required: true }, { minLength: 6, message: '新密码至少 6 位' }]}>
<Input.Password placeholder="请输入新密码" />
</Form.Item>
<Form.Item label="确认新密码" field="confirmPassword" rules={[{ required: true }]}>
<Input.Password placeholder="请再次输入新密码" />
</Form.Item>
<Button type="primary" htmlType="submit" loading={changingPassword}>确认修改</Button>
</Form>
</Card>
<div className="page-stack">
<div className="grid items-start gap-4 min-[901px]:grid-cols-[minmax(0,1fr)_420px]">
<Card className="section-card min-[901px]:row-span-2" title="个人中心" loading={loading}>
<ProfileSummary profile={profile} />
<ProfileInfoList profile={profile} />
</Card>
<Card className="section-card" title="修改个人信息">
<Form form={form} layout="vertical" onSubmit={updateProfile}>
<Form.Item label="姓名" field="nickname">
<Input placeholder="请输入姓名" />
</Form.Item>
<Form.Item label="邮箱" field="email" rules={[{ type: 'email', message: '请输入正确的邮箱地址' }]}>
<Input placeholder="请输入邮箱" />
</Form.Item>
<Button type="primary" htmlType="submit" loading={saving}>保存修改</Button>
</Form>
</Card>
<Card className="section-card" title="修改密码">
<Form form={passwordForm} layout="vertical" onSubmit={changePassword}>
<Form.Item label="旧密码" field="oldPassword" rules={[{ required: true }]}>
<Input.Password placeholder="请输入旧密码" />
</Form.Item>
<Form.Item label="新密码" field="newPassword" rules={[{ required: true }, { minLength: 6, message: '新密码至少 6 位' }]}>
<Input.Password placeholder="请输入新密码" />
</Form.Item>
<Form.Item label="确认新密码" field="confirmPassword" rules={[{ required: true }]}>
<Input.Password placeholder="请再次输入新密码" />
</Form.Item>
<Button type="primary" htmlType="submit" loading={changingPassword}>确认修改</Button>
</Form>
</Card>
</div>
</div>
);
}