feat: Add base project structure with API and web components
This commit is contained in:
Ke Sun
161
web/src/views/MemberManagement/components/MemberModal.tsx
Normal file
161
web/src/views/MemberManagement/components/MemberModal.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
import { forwardRef, useImperativeHandle, useState } from 'react';
|
||||
import { Form, Input, Select, Modal, App } from 'antd';
|
||||
import type { SelectProps } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import copy from 'copy-to-clipboard'
|
||||
|
||||
import type { MemberModalData, Member, MemberModalRef } from '../types'
|
||||
import RbModal from '@/components/RbModal'
|
||||
import { inviteMember, updateMember } from '@/api/member'
|
||||
|
||||
const FormItem = Form.Item;
|
||||
const { Option } = Select;
|
||||
type LabelRender = SelectProps['labelRender'];
|
||||
|
||||
interface MemberModalProps {
|
||||
refreshTable: () => void;
|
||||
}
|
||||
|
||||
const MemberModal = forwardRef<MemberModalRef, MemberModalProps>(({
|
||||
refreshTable
|
||||
}, ref) => {
|
||||
const { t } = useTranslation();
|
||||
const { message } = App.useApp()
|
||||
const initialForm = {
|
||||
// role: 'member',
|
||||
}
|
||||
const [visible, setVisible] = useState(false);
|
||||
const [editingUser, setEditingUser] = useState<Member | null>(null);
|
||||
const [form] = Form.useForm<MemberModalData>();
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [modal, contextHolder] = Modal.useModal();
|
||||
|
||||
const roleOptions = [
|
||||
'member',
|
||||
'manager'
|
||||
]
|
||||
const values: MemberModalData = Form.useWatch([], form);
|
||||
|
||||
// 封装取消方法，添加关闭弹窗逻辑
|
||||
const handleClose = () => {
|
||||
setVisible(false);
|
||||
setEditingUser(null);
|
||||
form.resetFields();
|
||||
setLoading(false)
|
||||
};
|
||||
|
||||
const handleOpen = (member?: Member | null) => {
|
||||
if (member) {
|
||||
setEditingUser(member);
|
||||
// 设置表单值
|
||||
form.setFieldsValue({
|
||||
email: member.account,
|
||||
role: member.role
|
||||
});
|
||||
} else {
|
||||
form.resetFields();
|
||||
}
|
||||
setVisible(true);
|
||||
};
|
||||
// 封装保存方法，添加提交逻辑
|
||||
const handleSave = () => {
|
||||
form
|
||||
.validateFields()
|
||||
.then(() => {
|
||||
setLoading(true)
|
||||
const response = editingUser?.id
|
||||
? updateMember({
|
||||
role: values.role,
|
||||
id: editingUser?.id
|
||||
}) : inviteMember(values)
|
||||
|
||||
response.then((res) => {
|
||||
setLoading(false)
|
||||
refreshTable()
|
||||
if (editingUser?.id) {
|
||||
refreshTable()
|
||||
handleClose()
|
||||
} else {
|
||||
const inviteLink = `${window.location.origin}/#/invite-register/${(res as { invite_token: string }).invite_token}`
|
||||
modal.confirm({
|
||||
title: t('member.inviteLinkTip'),
|
||||
content: <a href={inviteLink} target="_blank" rel="noopener noreferrer">{inviteLink}</a>,
|
||||
okText: t('common.copy'),
|
||||
okType: 'danger',
|
||||
onOk: () => {
|
||||
copy(inviteLink)
|
||||
handleClose()
|
||||
message.success(t('common.copySuccess'))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
setLoading(false)
|
||||
});
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err', err)
|
||||
});
|
||||
}
|
||||
|
||||
// 暴露给父组件的方法
|
||||
useImperativeHandle(ref, () => ({
|
||||
handleOpen,
|
||||
handleClose
|
||||
}));
|
||||
const labelRender: LabelRender = (props) => {
|
||||
const { label, value } = props;
|
||||
|
||||
if (label) {
|
||||
return t(`member.${value}`);
|
||||
}
|
||||
return <span>No option match</span>;
|
||||
};
|
||||
|
||||
return (
|
||||
<RbModal
|
||||
title={t(editingUser ? 'member.editMember' : 'member.createMember')}
|
||||
open={visible}
|
||||
onCancel={handleClose}
|
||||
okText={editingUser ? t('common.save') : t('member.sendInvitation')}
|
||||
onOk={handleSave}
|
||||
confirmLoading={loading}
|
||||
>
|
||||
<Form
|
||||
form={form}
|
||||
initialValues={initialForm}
|
||||
layout="vertical"
|
||||
>
|
||||
<FormItem
|
||||
name="email"
|
||||
label={t('member.email')}
|
||||
rules={[{ required: true, message: t('common.pleaseEnter') }]}
|
||||
>
|
||||
<Input placeholder={t('common.inputPlaceholder', { title: t('member.email') })} disabled={!!editingUser} />
|
||||
</FormItem>
|
||||
|
||||
<FormItem
|
||||
name="role"
|
||||
label={t('member.inviteToMember')}
|
||||
rules={[{ required: true, message: t('common.select') }]}
|
||||
>
|
||||
<Select
|
||||
placeholder={t('common.select')}
|
||||
labelRender={labelRender}
|
||||
>
|
||||
{roleOptions.map(key => (
|
||||
<Option key={key} value={key}>
|
||||
{t(`member.${key}`)}
|
||||
<div className="rb:text-[#5B6167] rb:text-[12px]">{t(`member.${key}Desc`)} </div>
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</FormItem>
|
||||
</Form>
|
||||
{contextHolder}
|
||||
</RbModal>
|
||||
);
|
||||
});
|
||||
|
||||
export default MemberModal;
|
||||
116
web/src/views/MemberManagement/index.tsx
Normal file
116
web/src/views/MemberManagement/index.tsx
Normal file
@@ -0,0 +1,116 @@
|
||||
import React, { useRef } from 'react';
|
||||
import { App, Button, Space } from 'antd';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import type { AnyObject } from 'antd/es/_util/type';
|
||||
import { deleteMember, memberListUrl } from '@/api/member';
|
||||
|
||||
import MemberModal from './components/MemberModal';
|
||||
import type { Member, MemberModalRef } from './types'
|
||||
import Tag from '@/components/Tag';
|
||||
import Table, { type TableRef } from '@/components/Table'
|
||||
import { formatDateTime } from '@/utils/format';
|
||||
|
||||
const MemberManagement: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const { message, modal } = App.useApp();
|
||||
const memberFormRef = useRef<MemberModalRef>(null);
|
||||
const tableRef = useRef<TableRef>(null);
|
||||
|
||||
// 打开新增用户弹窗
|
||||
const handleEdit = (member?: Member) => {
|
||||
if (memberFormRef.current) {
|
||||
memberFormRef.current.handleOpen(member);
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新列表数据
|
||||
const refreshTable = () => {
|
||||
tableRef.current?.loadData()
|
||||
}
|
||||
|
||||
// 单个删除用户
|
||||
const handleDelete = async (member: Member) => {
|
||||
modal.confirm({
|
||||
title: t('common.confirmDeleteDesc', { name: member.username }),
|
||||
okText: t('common.delete'),
|
||||
okType: 'danger',
|
||||
onOk: () => {
|
||||
deleteMember(member.id)
|
||||
.then(() => {
|
||||
message.success(t('member.deleteSuccess'));
|
||||
refreshTable();
|
||||
})
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// 表格列配置
|
||||
const columns: ColumnsType = [
|
||||
{
|
||||
title: t('member.username'),
|
||||
dataIndex: 'username',
|
||||
key: 'username',
|
||||
},
|
||||
{
|
||||
title: t('member.account'),
|
||||
dataIndex: 'account',
|
||||
key: 'account',
|
||||
},
|
||||
{
|
||||
title: t('member.role'),
|
||||
dataIndex: 'role',
|
||||
key: 'role',
|
||||
render: (role: string) => {
|
||||
return <Tag color={role === 'member' ? 'processing' : 'error'}>{t(`member.${role}`)}</Tag>
|
||||
},
|
||||
},
|
||||
{
|
||||
title: t('member.lastLoginTime'),
|
||||
dataIndex: 'last_login_at',
|
||||
key: 'last_login_at',
|
||||
render: (last_login_at: string) => formatDateTime(last_login_at, 'YYYY-MM-DD HH:mm:ss'),
|
||||
},
|
||||
{
|
||||
title: t('common.operation'),
|
||||
key: 'action',
|
||||
render: (_, record: AnyObject) => (
|
||||
<Space size="large">
|
||||
<Button
|
||||
type="link"
|
||||
onClick={() => handleEdit(record as Member)}
|
||||
>
|
||||
{t('common.edit')}
|
||||
</Button>
|
||||
<Button type="link" danger onClick={() => handleDelete(record as Member)}>
|
||||
{t('common.delete')}
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="rb:flex rb:justify-end rb:mb-[12px]">
|
||||
<Button type="primary" onClick={() => handleEdit()}>
|
||||
{t('member.createMember')}
|
||||
</Button>
|
||||
</div>
|
||||
<Table
|
||||
ref={tableRef}
|
||||
apiUrl={memberListUrl}
|
||||
columns={columns}
|
||||
rowKey="id"
|
||||
pagination={false}
|
||||
/>
|
||||
|
||||
<MemberModal
|
||||
ref={memberFormRef}
|
||||
refreshTable={refreshTable}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MemberManagement;
|
||||
17
web/src/views/MemberManagement/types.ts
Normal file
17
web/src/views/MemberManagement/types.ts
Normal file
@@ -0,0 +1,17 @@
|
||||
// 用户数据类型
|
||||
export interface Member {
|
||||
id: string;
|
||||
username: string;
|
||||
account: string;
|
||||
role: string;
|
||||
last_login_at: string | number;
|
||||
}
|
||||
// 用户表单数据类型
|
||||
export interface MemberModalData {
|
||||
email: string;
|
||||
role: string;
|
||||
}
|
||||
// 定义组件暴露的方法接口
|
||||
export interface MemberModalRef {
|
||||
handleOpen: (user?: Member | null) => void;
|
||||
}
|
||||
Reference in New Issue
Block a user