feat(web): 输入控件与按钮放大、设置卡片收窄加阴影、设置页增加取消按钮
- 主题 components:Input/Select/InputNumber/DatePicker/Button 文本 16px、高度 40px(小号按钮 32px);表格/菜单等正文保持 14px - 设置卡片 max-width 720→560px,四周柔和阴影 - 修改密码页保存按钮右侧、修改资料页重置按钮右侧增加取消按钮, 点击回首页
This commit is contained in:
@@ -9,10 +9,11 @@
|
||||
|
||||
.settings-card {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
max-width: 560px;
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
|
||||
/* 四周柔和阴影,与内容区背景拉开层次 */
|
||||
box-shadow: 0 0 24px 0 rgba(17, 24, 39, 0.12);
|
||||
}
|
||||
|
||||
.settings-card-title {
|
||||
|
||||
@@ -13,11 +13,19 @@ function App() {
|
||||
token: {
|
||||
colorPrimary: '#8b5cf6',
|
||||
borderRadius: 8,
|
||||
// 全局默认字号 14px;输入类控件默认高度在 32px 基础上同步加高一点
|
||||
// 全局正文字号 14px;输入类控件与按钮经 components 单独放大
|
||||
fontSize: 14,
|
||||
controlHeight: 34,
|
||||
controlHeightSM: 26,
|
||||
},
|
||||
components: {
|
||||
// 文本框与按钮:文本 16px、高度同步加高;表格/菜单等正文不受影响
|
||||
Input: { fontSize: 16, controlHeight: 40 },
|
||||
Select: { fontSize: 16, controlHeight: 40 },
|
||||
InputNumber: { fontSize: 16, controlHeight: 40 },
|
||||
DatePicker: { fontSize: 16, controlHeight: 40 },
|
||||
Button: { fontSize: 16, controlHeight: 40, controlHeightSM: 32 },
|
||||
},
|
||||
}}
|
||||
>
|
||||
<AntdApp>
|
||||
|
||||
@@ -116,6 +116,7 @@ const PasswordSettingsPage = () => {
|
||||
<Button type="primary" htmlType="submit" loading={submitting}>
|
||||
保存修改
|
||||
</Button>
|
||||
<Button onClick={() => navigate('/')}>取消</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { App as AntdApp, Avatar, Button, Form, Input } from 'antd';
|
||||
import axios from 'axios';
|
||||
import { authApi } from '@/services/auth';
|
||||
@@ -15,6 +16,7 @@ interface ProfileFormValues {
|
||||
*/
|
||||
const ProfileSettingsPage = () => {
|
||||
const { message } = AntdApp.useApp();
|
||||
const navigate = useNavigate();
|
||||
const { session, applyProfileUpdate } = useSession();
|
||||
const [form] = Form.useForm<ProfileFormValues>();
|
||||
const [saving, setSaving] = useState(false);
|
||||
@@ -100,6 +102,7 @@ const ProfileSettingsPage = () => {
|
||||
保存修改
|
||||
</Button>
|
||||
<Button onClick={handleReset}>重 置</Button>
|
||||
<Button onClick={() => navigate('/')}>取消</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user