@jiangood/open-admin 3.1.11 → 3.1.12

package/src/pages/standalone/{forceUpdatePwd.jsx → force-update-pwd.jsx}

@@ -1,17 +1,23 @@
 import React from "react";
 import {Button, Form, Input} from "antd";
-import {getMessageApi, getToken, HttpClient, history} from "../../framework";
+import {getMessageApi, getToken, HttpClient, history, LOGIN_PATH} from "../../framework";
+
+export const pageMeta = {
+    requiresAuth: true,
+    layout: 'blank',
+    title: '修改密码',
+};
 
 export default class ForceUpdatePwdPage extends React.Component {
 
     onFinish = (values) => {
-        HttpClient.post('admin/userCenter/update-pwd', values, null).then(() => {
+        HttpClient.post('admin/user-center/update-pwd', values, null).then(() => {
             getMessageApi().success('修改密码成功，请重新登录');
-            history.push('/public/login');
+            history.push(LOGIN_PATH);
         })
     }
 
-    validator = (rule, value) => HttpClient.get("admin/sysUser/pwd-strength", {password: value}, {toastError: false})
+    validator = (rule, value) => HttpClient.get("admin/sys-user/pwd-strength", {password: value}, {toastError: false})
         .catch(e => {
             throw new Error(e.message)
         })

package/src/pages/system/article/index.jsx

@@ -36,7 +36,7 @@ export default class ArticleListPage extends React.Component {
     }
 
     handlePreview = record => {
-        PageUtils.open('/article/' + record.code, record.title)
+        PageUtils.open('/article/' + record.code)
     }
 
     onFinish = async values => {

package/src/pages/system/config/index.jsx

@@ -3,7 +3,6 @@ import {
     Button,
     Card,
     Col,
-    Divider,
     Form,
     Input,
     InputNumber,
@@ -21,7 +20,7 @@ import {QuestionCircleOutlined, UndoOutlined} from '@ant-design/icons'
 import {EventBus, GlobalData, HttpClient, Page, Perm} from '../../../framework'
 
 /**
- * 系统配置页。
+ * 参数设置页。
  *
  * 配置项由后端 ConfigProvider 声明（分组 / 类型 / 默认值 / 范围 / 说明），
  * 本页面只负责按元数据渲染、收集修改项并提交差异。
@@ -32,6 +31,7 @@ export default class SysConfigPage extends React.Component {
         groups: [],
         loading: true,
         saving: false,
+        testingMail: false,
         dirty: false,
     }
 
@@ -141,6 +141,19 @@ export default class SysConfigPage extends React.Component {
         }
     }
 
+    /** 用已保存的配置发一封测试邮件到发件邮箱自身 */
+    sendTestMail = async () => {
+        this.setState({testingMail: true})
+        try {
+            // 成功提示由后端 message 自动弹出
+            await HttpClient.post('admin/mail/test')
+        } catch {
+            // 错误提示由 HttpClient 统一处理
+        } finally {
+            this.setState({testingMail: false})
+        }
+    }
+
     resetKeys = async (keys) => {
         try {
             const rs = await HttpClient.post('admin/sys-config/reset', {keys})
@@ -189,6 +202,8 @@ export default class SysConfigPage extends React.Component {
                                }))}/>
             case 'text':
                 return <Input.TextArea rows={3}/>
+            case 'proxy':
+                return <Input placeholder="http://user:pass@192.168.1.10:8080" autoComplete="off"/>
             case 'string':
                 return item.secret
                     ? <Input.Password autoComplete="new-password"
@@ -257,32 +272,43 @@ export default class SysConfigPage extends React.Component {
     }
 
     render() {
-        const {groups, loading, saving, dirty} = this.state
+        const {groups, loading, saving, testingMail, dirty} = this.state
         const hasOverridden = groups.some(group => group.items.some(item => item.overridden))
+        // 首次加载显示骨架屏；切回 Tab 等刷新时保留现有内容，避免闪白
+        const initialLoading = loading && groups.length === 0
 
         return <Page>
             <Form ref={this.formRef} layout="vertical" onValuesChange={this.onValuesChange}>
-                <Card loading={loading}>
-                    {groups.map((group, index) => (
-                        <div key={group.code}>
-                            <div style={{marginBottom: 12}}>
-                                <Typography.Title level={5} style={{margin: 0}}>{group.label}</Typography.Title>
-                                {group.description && (
-                                    <Typography.Text type="secondary" style={{fontSize: 12}}>
-                                        {group.description}
-                                    </Typography.Text>
-                                )}
-                            </div>
+                {initialLoading && <Card loading style={{marginBottom: 16}}/>}
+                <div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
+                    {groups.map(group => (
+                        <Card key={group.code}
+                              title={group.label}
+                              extra={group.code === 'mail' && (
+                                  <Perm code='sys-config:update'>
+                                      <Button loading={testingMail}
+                                              disabled={dirty}
+                                              title={dirty ? '请先保存配置修改' : '发送一封测试邮件到发件邮箱'}
+                                              onClick={this.sendTestMail}>
+                                          发送测试邮件
+                                      </Button>
+                                  </Perm>
+                              )}>
+                            {group.description && (
+                                <Typography.Text type="secondary"
+                                                 style={{display: 'block', fontSize: 12, marginBottom: 16}}>
+                                    {group.description}
+                                </Typography.Text>
+                            )}
                             <Row gutter={16}>
                                 {group.items.map(this.renderItem)}
                             </Row>
-                            {index < groups.length - 1 && <Divider style={{margin: '8px 0 20px'}}/>}
-                        </div>
+                        </Card>
                     ))}
+                </div>
 
-                    {groups.length > 0 && <Divider style={{margin: '4px 0 16px'}}/>}
-
-                    <Space wrap>
+                {groups.length > 0 && (
+                    <Space wrap style={{marginTop: 16}}>
                         <Perm code='sys-config:update'>
                             <Button type="primary" loading={saving} disabled={!dirty} onClick={this.save}>
                                 保存修改
@@ -302,7 +328,7 @@ export default class SysConfigPage extends React.Component {
                             配置默认值来自 application.yml 或代码声明
                         </Typography.Text>
                     </Space>
-                </Card>
+                )}
             </Form>
         </Page>
     }

package/src/pages/system/file/index.jsx

@@ -15,13 +15,13 @@ export default class FilePage extends React.Component {
     formRef = React.createRef()
 
     handleDelete = row => {
-        HttpClient.post('admin/sysFile/delete', {value: row.objectName}, null).then(() => {
+        HttpClient.post('admin/sys-file/delete', {value: row.objectName}, null).then(() => {
             this.tableRef.current.reload()
         })
     }
 
     handleBatchDelete = ids => {
-        HttpClient.post('admin/sysFile/deleteBatch', ids, null).then(() => {
+        HttpClient.post('admin/sys-file/delete-batch', ids, null).then(() => {
             this.tableRef.current.reload()
             this.tableRef.current.clearSelection()
         })
@@ -167,7 +167,7 @@ export default class FilePage extends React.Component {
                     </Space>
                 )}
                 request={(params) => {
-                    return HttpClient.get('admin/sysFile/page', params);
+                    return HttpClient.get('admin/sys-file/page', params);
                 }}
 
                 columns={this.columns}

package/src/pages/system/job/index.jsx

@@ -362,7 +362,7 @@ export default class JobPage extends React.Component {
                        onFinish={this.onFinish}
                        onValuesChange={this.onValuesChange}>
                 <Form.Item label='执行类' name='jobClass' rules={[{required: true}]}
-                           tooltip='继承 BaseJob，参考 HelloWorldJob'>
+                           tooltip='继承 BaseJob'>
                     <Select options={this.state.jobClassOptions}/>
                 </Form.Item>
                 <Form.Item label='名称' name='name' rules={[{required: true}]}>

package/src/pages/system/log/index.jsx

@@ -55,7 +55,7 @@ export default class LogPage extends React.Component {
     render() {
         return <Page>
             <ProTable
-                request={(params) => HttpClient.get('admin/sysLog/page', params)}
+                request={(params) => HttpClient.get('admin/sys-log/page', params)}
                 columns={this.columns}
                 searchFormRender={() => (
                     <>

package/src/pages/system/online/index.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import {Form, Input, Tag} from 'antd';
+import {HttpClient, Page, PermActions, ProTable} from "../../../framework";
+
+/**
+ * 在线用户：一个登录会话一行，支持强制下线。
+ * 数据来自内存中的 HttpSession 元数据，仅单实例部署准确。
+ */
+export default class OnlineUserPage extends React.Component {
+
+    tableRef = React.createRef();
+
+    handleKick = row => {
+        HttpClient.post('admin/sys-online-user/kick', {id: row.id}).then(() => {
+            this.tableRef.current.reload();
+        });
+    };
+
+    columns = [
+        {
+            title: '登录账号',
+            dataIndex: 'username',
+            width: 140,
+        },
+        {
+            title: '姓名',
+            dataIndex: 'name',
+            width: 120,
+        },
+        {
+            title: '所属机构',
+            dataIndex: 'unitName',
+            width: 180,
+            render: (_, record) => {
+                // 单位与机构可能指向同一节点（如 admin 挂在根单位），去重后避免「默认单位 / 默认单位」
+                const names = [...new Set([record.unitName, record.orgName].filter(Boolean))];
+                return names.length ? names.join(' / ') : '-';
+            },
+        },
+        {
+            title: 'IP',
+            dataIndex: 'ip',
+            width: 140,
+        },
+        {
+            title: '登录时间',
+            dataIndex: 'loginTime',
+            width: 170,
+            render: v => v || '-',
+        },
+        {
+            title: '最后活跃',
+            dataIndex: 'lastActiveTime',
+            width: 170,
+            render: v => v || '-',
+        },
+        {
+            title: '操作',
+            dataIndex: 'option',
+            width: 130,
+            fixed: 'right',
+            render: (_, record) => {
+                if (record.current) {
+                    return <Tag color="green">当前会话</Tag>;
+                }
+                return <PermActions
+                    size="small"
+                    actions={[{
+                        label: '强制下线',
+                        perm: 'sys-online:kick',
+                        danger: true,
+                        confirm: `确定强制下线「${record.name || record.username}」吗？`,
+                        onClick: () => this.handleKick(record),
+                    }]}
+                />;
+            },
+        },
+    ];
+
+    render() {
+        return <Page>
+            <ProTable
+                actionRef={this.tableRef}
+                request={params => HttpClient.get('admin/sys-online-user/page', params)}
+                columns={this.columns}
+                searchFormRender={() => (
+                    <Form.Item label='账号/姓名/IP' name='keyword'>
+                        <Input placeholder='支持账号、姓名、IP 模糊搜索' allowClear/>
+                    </Form.Item>
+                )}
+            />
+        </Page>;
+    }
+
+}

package/src/pages/system/org/index.jsx

@@ -38,7 +38,7 @@ export default class OrgPage extends React.Component {
 
     loadTree = () => {
         this.setState({treeLoading: true})
-        HttpClient.get('admin/sysOrg/tree', this.state.params, {toastError: false}).then(rs => {
+        HttpClient.get('admin/sys-org/tree', this.state.params, {toastError: false}).then(rs => {
             this.setState({treeData: rs.data})
             this.setState({treeLoading: false});
         }).catch(() => {
@@ -53,7 +53,7 @@ export default class OrgPage extends React.Component {
     handleDelete = () => {
         const {selectedOrg} = this.state
         if (!selectedOrg) return
-        HttpClient.post('admin/sysOrg/delete', {id: selectedOrg.id}, null).then(() => {
+        HttpClient.post('admin/sys-org/delete', {id: selectedOrg.id}, null).then(() => {
             this.setState({selectedOrg: null, deleteModalOpen: false})
             this.loadTree()
         })
@@ -64,7 +64,7 @@ export default class OrgPage extends React.Component {
             this.setState({selectedOrg: null})
             return
         }
-        HttpClient.get("admin/sysOrg/detail", {id: selectedKeys[0]}).then(rs => {
+        HttpClient.get("admin/sys-org/detail", {id: selectedKeys[0]}).then(rs => {
             this.setState({selectedOrg: rs.data})
         })
     }
@@ -80,7 +80,7 @@ export default class OrgPage extends React.Component {
 
     handleModalFinish = async values => {
         const isNew = !values.id
-        const url = isNew ? 'admin/sysOrg/create' : 'admin/sysOrg/update'
+        const url = isNew ? 'admin/sys-org/create' : 'admin/sys-org/update'
         await HttpClient.post(url, values)
         this.loadTree()
     }
@@ -189,13 +189,13 @@ export default class OrgPage extends React.Component {
                        onFinish={this.handleModalFinish}
                        labelCol={{flex: '120px'}}>
                 <Form.Item label='父节点' name='pid'>
-                    <FieldRemoteTreeSelect url='admin/sysOrg/tree'/>
+                    <FieldRemoteTreeSelect url='admin/sys-org/tree'/>
                 </Form.Item>
                 <Form.Item label='名称' name='name' rules={[{required: true}]}>
                     <Input/>
                 </Form.Item>
                 <Form.Item label='类型' name='type' rules={[{required: true}]}>
-                    <FieldRemoteSelect url='admin/sysOrg/type-options' placeholder='请选择类型'/>
+                    <FieldRemoteSelect url='admin/sys-org/type-options' placeholder='请选择类型'/>
                 </Form.Item>
                 <Form.Item label='部门领导' name={['leader', 'id']}>
                     <FieldUserSelect/>
@@ -233,7 +233,7 @@ export default class OrgPage extends React.Component {
         const dragKey = dragNode.key;
         const dropPos = e.node.pos.split('-');
         const dropPosition = e.dropPosition - Number(dropPos[dropPos.length - 1]);
-        HttpClient.post('admin/sysOrg/sort', {dropPosition, dropToGap, dropKey, dragKey}, null).then(() => this.loadTree())
+        HttpClient.post('admin/sys-org/sort', {dropPosition, dropToGap, dropKey, dragKey}, null).then(() => this.loadTree())
     };
 }
 

package/src/pages/system/role/index.jsx

@@ -26,20 +26,20 @@ export default class RolePage extends React.Component {
     }
 
     handleEditUser = record => {
-        HttpClient.get('admin/sysRole/user-list', {id: record.id}).then(rs => {
+        HttpClient.get('admin/sys-role/user-list', {id: record.id}).then(rs => {
             this.setState({pickerOpen: true, selectedRecord: record, targetKeys: rs.data?.selectedKeys || []})
         })
     }
 
     onFinish = async values => {
         const isNew = !values.id;
-        const url = isNew ? 'admin/sysRole/create' : 'admin/sysRole/update';
+        const url = isNew ? 'admin/sys-role/create' : 'admin/sys-role/update';
         await HttpClient.post(url, values)
         this.tableRef.current.reload()
     }
 
     handleDelete = record => {
-        HttpClient.post('admin/sysRole/delete', {id: record.id}, null).then(() => {
+        HttpClient.post('admin/sys-role/delete', {id: record.id}, null).then(() => {
             this.tableRef.current.reload()
         })
     }
@@ -109,7 +109,7 @@ export default class RolePage extends React.Component {
                     size="small"
                     actions={[
                         {label: '用户设置', perm: 'sys-role:grant-permission', onClick: () => this.handleEditUser(record)},
-                        {label: '权限设置', perm: 'sys-role:grant-permission', onClick: () => PageUtils.open('/system/role/rolePerm?id=' + record.id, '角色权限设置')},
+                        {label: '权限设置', perm: 'sys-role:grant-permission', onClick: () => PageUtils.open('/system/role/role-perm?id=' + record.id)},
                         {label: '编辑', perm: 'sys-role:update', onClick: () => this.handleEdit(record)},
                         {label: '删除', perm: 'sys-role:delete', confirm: '是否确定删除系统角色', onClick: () => this.handleDelete(record)},
                     ]}
@@ -124,7 +124,7 @@ export default class RolePage extends React.Component {
             id: this.state.selectedRecord.id,
             userIdList
         }
-        HttpClient.post('admin/sysRole/grant-users', params, null, {toastError: false}).then(() => {
+        HttpClient.post('admin/sys-role/grant-users', params, null, {toastError: false}).then(() => {
             this.setState({pickerOpen: false, usersModalLoading: false})
         }).catch(() => {
             this.setState({usersModalLoading: false})
@@ -141,7 +141,7 @@ export default class RolePage extends React.Component {
                         {label: '新增', type: 'primary', icon: <PlusOutlined/>, perm: 'sys-role:create', onClick: this.handleAdd},
                     ]}/>
                 )}
-                request={(params) => HttpClient.get('admin/sysRole/page', params)}
+                request={(params) => HttpClient.get('admin/sys-role/page', params)}
                 columns={this.columns}
                 searchInline
                 searchFormRender={() => (
@@ -186,8 +186,8 @@ export default class RolePage extends React.Component {
                 title={'为「' + (this.state.selectedRecord?.name || '') + '」角色分配用户'}
                 value={this.state.targetKeys}
                 confirmLoading={this.state.usersModalLoading}
-                requestUrl='admin/sysRole/user-page'
-                usersUrl='admin/sysRole/user-by-ids'
+                requestUrl='admin/sys-role/user-page'
+                usersUrl='admin/sys-role/user-by-ids'
                 onOk={this.handleSaveUsers}
                 onCancel={() => this.setState({pickerOpen: false})}
             />

package/src/pages/system/role/{rolePerm.jsx → role-perm.jsx}

@@ -2,6 +2,11 @@ import React from "react";
 import {Button, Card, Checkbox, Table, Typography} from "antd";
 import {SaveOutlined} from "@ant-design/icons";
 import {HttpClient, Page} from "../../../framework";
+
+export const pageMeta = {
+    title: '角色权限设置',
+};
+
 export default class RolePermPage extends React.Component {
 
 
@@ -62,15 +67,15 @@ export default class RolePermPage extends React.Component {
                 this.setState({loading: false})
             }
         };
-        HttpClient.get('admin/sysRole/get', {id: this.roleId}).then(rs => {
+        HttpClient.get('admin/sys-role/get', {id: this.roleId}).then(rs => {
             this.setState({roleInfo: rs.data})
             onFinish()
         });
-        HttpClient.get('admin/sysRole/perm-tree-table', {id: this.roleId}).then(rs => {
+        HttpClient.get('admin/sys-role/perm-tree-table', {id: this.roleId}).then(rs => {
             this.setState({dataSource: rs.data})
             onFinish()
         });
-        HttpClient.get('admin/sysRole/own-perms', {id: this.roleId}).then(rs => {
+        HttpClient.get('admin/sys-role/own-perms', {id: this.roleId}).then(rs => {
             this.setState({rowSelectedKeys: rs.data})
             onFinish()
         });
@@ -88,7 +93,7 @@ export default class RolePermPage extends React.Component {
             menus.push(menuId)
             perms.push(...ks)
         }
-        HttpClient.post('admin/sysRole/save-perms', {id: this.roleId, perms, menus})
+        HttpClient.post('admin/sys-role/save-perms', {id: this.roleId, perms, menus})
     };
 
 

package/src/pages/system/user/{userPerm.jsx → UserPermModal.jsx}

@@ -20,7 +20,7 @@ export default class UserPerm extends React.Component {
     show(item) {
         this.setState({visible: true})
 
-        HttpClient.get('admin/sysUser/get-perm-info', {id: item.id}).then(rs => {
+        HttpClient.get('admin/sys-user/get-perm-info', {id: item.id}).then(rs => {
             this.setState({formValues: rs.data})
             this.formRef.current.setFieldsValue(rs.data)
         })
@@ -34,7 +34,7 @@ export default class UserPerm extends React.Component {
         })
 
 
-        HttpClient.post('admin/sysUser/grant-perm', values, null, {toastError: false}).then(() => {
+        HttpClient.post('admin/sys-user/grant-perm', values, null, {toastError: false}).then(() => {
             this.setState({
                 visible: false,
                 confirmLoading: false
@@ -70,7 +70,7 @@ export default class UserPerm extends React.Component {
             >
                 <Form.Item name='id' noStyle></Form.Item>
                 <Form.Item label='角色' name='roleIds' rules={[{required: true}]}>
-                    <FieldRemoteSelect url='admin/sysRole/options' multiple />
+                    <FieldRemoteSelect url='admin/sys-role/options' multiple />
                 </Form.Item>
                 <Form.Item label='数据权限' name='dataPermType' rules={[{required: true}]}>
                     <FieldDictSelect typeCode='dataPermType'/>

package/src/pages/system/user/index.jsx

@@ -14,7 +14,7 @@ import {
     ProTable,
     ViewText,
 } from "../../../framework";
-import UserPerm from "./userPerm";
+import UserPerm from "./UserPermModal";
 
 export default class UserPage extends React.Component {
 
@@ -36,13 +36,13 @@ export default class UserPage extends React.Component {
     }
 
     onFinishResetPwd = async values => {
-        await HttpClient.post('admin/sysUser/reset-pwd', {id: this.state.resetPwdUser.id, password: values.password})
+        await HttpClient.post('admin/sys-user/reset-pwd', {id: this.state.resetPwdUser.id, password: values.password})
         this.setState({resetPwdUser: null})
         this.tableRef.current?.reload()
     }
 
     handleDelete = r => {
-        HttpClient.post('admin/sysUser/delete', {id: r.id}, null).then(() => {
+        HttpClient.post('admin/sys-user/delete', {id: r.id}, null).then(() => {
             this.tableRef.current.reload();
         })
     }
@@ -135,7 +135,7 @@ export default class UserPage extends React.Component {
 
     onFinish = async values => {
         const isNew = !values.id;
-        const url = isNew ? 'admin/sysUser/create' : 'admin/sysUser/update';
+        const url = isNew ? 'admin/sys-user/create' : 'admin/sys-user/update';
         const result = await HttpClient.post(url, values);
         if (result?.data?.password) {
             this.setState({
@@ -170,7 +170,7 @@ export default class UserPage extends React.Component {
                         )}
                         request={(params) => {
                             params.orgId = this.state.currentOrgId
-                            return HttpClient.get('admin/sysUser/page', params)
+                            return HttpClient.get('admin/sys-user/page', params)
                         }}
                         columns={this.columns}
                         searchFormRender={() => (
@@ -185,7 +185,7 @@ export default class UserPage extends React.Component {
                                     <Input/>
                                 </Form.Item>
                                 <Form.Item label='角色' name='roleId'>
-                                    <FieldRemoteSelect url='admin/sysRole/options' placeholder='请选择角色'/>
+                                    <FieldRemoteSelect url='admin/sys-role/options' placeholder='请选择角色'/>
                                 </Form.Item>
                                 <Form.Item label='状态' name='enabled'>
                                     <Select allowClear placeholder='全部' options={[{value: true, label: '启用'}, {value: false, label: '停用'}]}/>

package/src/pages/user-center/AvatarPicker.jsx

@@ -0,0 +1,76 @@
+import React from "react";
+import {Avatar, Tooltip} from "antd";
+import {
+    AvatarUtils,
+    FALLBACK_AVATAR_PRESETS,
+    FieldUploadImage,
+    getToken,
+    HttpClient,
+} from "../../framework";
+
+const ITEM_SIZE = 44;
+
+/**
+ * 头像选择：内置头像 + 自定义上传
+ * <p>
+ * 内置头像从后端 admin/public/avatar-presets 获取，移动端可复用同一接口；
+ * 上传入口以虚线圆形按钮排在列表末尾，选中/上传后直接在同一排展示结果。
+ */
+export default class AvatarPicker extends React.Component {
+
+    state = {
+        presets: FALLBACK_AVATAR_PRESETS,
+    }
+
+    componentDidMount() {
+        HttpClient.get('admin/public/avatar-presets', null, {toastError: false}).then(rs => {
+            const presets = rs.data?.presets;
+            if (Array.isArray(presets) && presets.length > 0) {
+                this.setState({presets});
+            }
+        }).catch(() => {
+            // 接口不可用时保留前端兜底列表
+        })
+    }
+
+    render() {
+        const {value, onChange} = this.props;
+        const {presets} = this.state;
+        const uploaded = value && !AvatarUtils.isPreset(value) ? value : '';
+        const primary = getToken().colorPrimary;
+
+        return <div style={{display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 10}}>
+            {presets.map(preset => {
+                const selected = (value || '') === preset.key;
+                return <Tooltip key={preset.key} title={preset.label}>
+                    <button type="button"
+                            aria-label={preset.label}
+                            aria-pressed={selected}
+                            onClick={() => onChange?.(preset.key)}
+                            style={{
+                                width: ITEM_SIZE,
+                                height: ITEM_SIZE,
+                                padding: 0,
+                                border: 'none',
+                                borderRadius: '50%',
+                                background: 'transparent',
+                                cursor: 'pointer',
+                                lineHeight: 0,
+                                boxShadow: selected ? `0 0 0 2px ${primary}` : 'none',
+                                transition: 'box-shadow .2s',
+                            }}>
+                        <Avatar size={ITEM_SIZE} src={preset.url}/>
+                    </button>
+                </Tooltip>;
+            })}
+
+            <FieldUploadImage value={uploaded}
+                              onChange={(v) => onChange?.(v || '')}
+                              maxCount={1}
+                              shape="circle"
+                              size={ITEM_SIZE}
+                              triggerTitle="上传自定义头像"
+                              defaultCropRatio={{width: 1, height: 1}}/>
+        </div>;
+    }
+}