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

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>
);
}