style: 完成后台样式统一优化

本次提交完成全后台页面的样式统一整改:
1. 新增Tailwind语义化颜色token,替换所有硬编码颜色值
2. 统一全站悬浮交互效果与阴影样式
3. 修正头像、菜单的品牌渐变配色
4. 统一登录页背景色为语义化token
5. 补全缺失的页面容器包裹
6. 统一弹窗宽度与表格分页配置
7. 标准化状态标签颜色与新增按钮样式
8. 对齐表单控件宽度规范
This commit is contained in:
2026-07-03 15:16:32 +08:00
parent 214578316e
commit 8019c52fbc
13 changed files with 200 additions and 64 deletions

View File

@@ -62,6 +62,7 @@ function RolesPage() {
};
return (
<div className="page-stack">
<Panel
title="角色管理"
extra={
@@ -79,6 +80,8 @@ function RolesPage() {
current: data.pagination.page,
total: data.pagination.total,
pageSize: data.pagination.pageSize,
sizeCanChange: true,
showTotal: true,
onChange: changePage,
}}
columns={[
@@ -106,7 +109,7 @@ function RolesPage() {
},
]}
/>
<Modal title="新增角色" visible={createVisible} onCancel={() => setCreateVisible(false)} footer={null}>
<Modal title="新增角色" visible={createVisible} onCancel={() => setCreateVisible(false)} footer={null} style={{ width: 640 }}>
<Form form={createForm} layout="vertical" onSubmit={createRole}>
<Form.Item label="角色编码" field="code" rules={[{ required: true }]}>
<Input placeholder="请输入角色编码,例如 drama_operator" />
@@ -135,10 +138,12 @@ function RolesPage() {
confirmLoading={savingPermissions}
onOk={saveRolePermissions}
onCancel={() => setAssignmentVisible(false)}
style={{ width: 640 }}
>
<PermissionTreePicker permissions={permissions.data.list} value={selectedPermissionIds} onChange={setSelectedPermissionIds} />
</Modal>
</Panel>
</div>
);
}