feat: init
This commit is contained in:
landaiqing
21
src/pages/Access/index.tsx
Normal file
21
src/pages/Access/index.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { Access, useAccess } from '@umijs/max';
|
||||
import { Button } from 'antd';
|
||||
|
||||
const AccessPage: React.FC = () => {
|
||||
const access = useAccess();
|
||||
return (
|
||||
<PageContainer
|
||||
ghost
|
||||
header={{
|
||||
title: '权限示例',
|
||||
}}
|
||||
>
|
||||
<Access accessible={access.canSeeAdmin}>
|
||||
<Button>只有 Admin 可以看到这个按钮</Button>
|
||||
</Access>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccessPage;
|
||||
3
src/pages/Home/index.less
Normal file
3
src/pages/Home/index.less
Normal file
@@ -0,0 +1,3 @@
|
||||
.container {
|
||||
padding-top: 80px;
|
||||
}
|
||||
18
src/pages/Home/index.tsx
Normal file
18
src/pages/Home/index.tsx
Normal file
@@ -0,0 +1,18 @@
|
||||
import Guide from '@/components/Guide';
|
||||
import { trim } from '@/utils/format';
|
||||
import { PageContainer } from '@ant-design/pro-components';
|
||||
import { useModel } from '@umijs/max';
|
||||
import styles from './index.less';
|
||||
|
||||
const HomePage: React.FC = () => {
|
||||
const { name } = useModel('global');
|
||||
return (
|
||||
<PageContainer ghost>
|
||||
<div className={styles.container}>
|
||||
<Guide name={trim(name)} />
|
||||
</div>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default HomePage;
|
||||
251
src/pages/Login/index.tsx
Normal file
251
src/pages/Login/index.tsx
Normal file
@@ -0,0 +1,251 @@
|
||||
import background from '@/assets/images/background.png';
|
||||
import logo from '@/assets/images/logo.png';
|
||||
import {
|
||||
GithubOutlined,
|
||||
GitlabOutlined,
|
||||
LockOutlined,
|
||||
MobileOutlined,
|
||||
QqOutlined,
|
||||
UserOutlined,
|
||||
WechatOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import {
|
||||
LoginFormPage,
|
||||
ProFormCaptcha,
|
||||
ProFormCheckbox,
|
||||
ProFormText,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Divider, Space, Tabs, message } from 'antd';
|
||||
import type { CSSProperties } from 'react';
|
||||
import { useState } from 'react';
|
||||
import { history } from 'umi';
|
||||
type LoginType = 'phone' | 'account';
|
||||
const iconStyles: CSSProperties = {
|
||||
color: 'rgba(0, 0, 0, 0.2)',
|
||||
fontSize: '18px',
|
||||
verticalAlign: 'middle',
|
||||
cursor: 'pointer',
|
||||
};
|
||||
export default () => {
|
||||
// console.log(name);
|
||||
const items = [
|
||||
{ label: '账户密码登录', key: 'account' },
|
||||
{ label: '手机号登录', key: 'phone' },
|
||||
];
|
||||
const [loginType, setLoginType] = useState<LoginType>('phone');
|
||||
|
||||
const onSubmit = async (formData: any) => {
|
||||
console.log(formData);
|
||||
history.push('/');
|
||||
};
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: 'white',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
}}
|
||||
>
|
||||
<LoginFormPage
|
||||
onFinish={onSubmit}
|
||||
backgroundImageUrl={background}
|
||||
logo={logo}
|
||||
title="五味子云存储后台"
|
||||
subTitle="一站式对象存储服务平台"
|
||||
// activityConfig={{
|
||||
// style: {
|
||||
// boxShadow: '0px 0px 8px rgba(0, 0, 0, 0.2)',
|
||||
// color: '#fff',
|
||||
// borderRadius: 8,
|
||||
// backgroundColor: '#1677FF',
|
||||
// },
|
||||
// title: '活动标题，可配置图片',
|
||||
// subTitle: '活动介绍说明文字',
|
||||
// action: (
|
||||
// <Button
|
||||
// size="large"
|
||||
// style={{
|
||||
// borderRadius: 20,
|
||||
// background: '#fff',
|
||||
// color: '#1677FF',
|
||||
// width: 120,
|
||||
// }}
|
||||
// >
|
||||
// 去看看
|
||||
// </Button>
|
||||
// ),
|
||||
// }}
|
||||
actions={
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Divider plain>
|
||||
<span
|
||||
style={{ color: '#CCC', fontWeight: 'normal', fontSize: 14 }}
|
||||
>
|
||||
其他登录方式
|
||||
</span>
|
||||
</Divider>
|
||||
<Space align="center" size={24}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: '1px solid #D4D8DD',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
>
|
||||
<QqOutlined style={{ ...iconStyles, color: '#1677FF' }} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: '1px solid #D4D8DD',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
>
|
||||
<WechatOutlined style={{ ...iconStyles, color: '#08a327' }} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: '1px solid #D4D8DD',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
>
|
||||
<GitlabOutlined style={{ ...iconStyles, color: '#333333' }} />
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: 40,
|
||||
width: 40,
|
||||
border: '1px solid #D4D8DD',
|
||||
borderRadius: '50%',
|
||||
}}
|
||||
>
|
||||
<GithubOutlined style={{ ...iconStyles, color: '#333333' }} />
|
||||
</div>
|
||||
</Space>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Tabs
|
||||
centered
|
||||
items={items}
|
||||
activeKey={loginType}
|
||||
onChange={(activeKey) => setLoginType(activeKey as LoginType)}
|
||||
></Tabs>
|
||||
|
||||
{loginType === 'account' && (
|
||||
<>
|
||||
<ProFormText
|
||||
name="username"
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <UserOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
placeholder={'请输入账号/邮箱/电话号码'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名!',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormText.Password
|
||||
name="password"
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
placeholder={'请输入密码'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{loginType === 'phone' && (
|
||||
<>
|
||||
<ProFormText
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <MobileOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
name="mobile"
|
||||
placeholder={'手机号'}
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入手机号！',
|
||||
},
|
||||
{
|
||||
pattern: /^1\d{10}$/,
|
||||
message: '手机号格式错误！',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<ProFormCaptcha
|
||||
fieldProps={{
|
||||
size: 'large',
|
||||
prefix: <LockOutlined className={'prefixIcon'} />,
|
||||
}}
|
||||
captchaProps={{
|
||||
size: 'large',
|
||||
}}
|
||||
placeholder={'请输入验证码'}
|
||||
captchaTextRender={(timing, count) => {
|
||||
if (timing) {
|
||||
return `${count} ${'获取验证码'}`;
|
||||
}
|
||||
return '获取验证码';
|
||||
}}
|
||||
name="captcha"
|
||||
rules={[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入验证码！',
|
||||
},
|
||||
]}
|
||||
onGetCaptcha={async () => {
|
||||
message.success('获取验证码成功！验证码为：1234');
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<div style={{ marginBlockEnd: 24 }}>
|
||||
<ProFormCheckbox noStyle name="autoLogin">
|
||||
自动登录
|
||||
</ProFormCheckbox>
|
||||
<a style={{ float: 'right' }}>忘记密码 </a>
|
||||
</div>
|
||||
</LoginFormPage>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
26
src/pages/Table/components/CreateForm.tsx
Normal file
26
src/pages/Table/components/CreateForm.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Modal } from 'antd';
|
||||
import React, { PropsWithChildren } from 'react';
|
||||
|
||||
interface CreateFormProps {
|
||||
modalVisible: boolean;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateForm: React.FC<PropsWithChildren<CreateFormProps>> = (props) => {
|
||||
const { modalVisible, onCancel } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
destroyOnClose
|
||||
title="新建"
|
||||
width={420}
|
||||
open={modalVisible}
|
||||
onCancel={() => onCancel()}
|
||||
footer={null}
|
||||
>
|
||||
{props.children}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateForm;
|
||||
138
src/pages/Table/components/UpdateForm.tsx
Normal file
138
src/pages/Table/components/UpdateForm.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
import {
|
||||
ProFormDateTimePicker,
|
||||
ProFormRadio,
|
||||
ProFormSelect,
|
||||
ProFormText,
|
||||
ProFormTextArea,
|
||||
StepsForm,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Modal } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export interface FormValueType extends Partial<API.UserInfo> {
|
||||
target?: string;
|
||||
template?: string;
|
||||
type?: string;
|
||||
time?: string;
|
||||
frequency?: string;
|
||||
}
|
||||
|
||||
export interface UpdateFormProps {
|
||||
onCancel: (flag?: boolean, formVals?: FormValueType) => void;
|
||||
onSubmit: (values: FormValueType) => Promise<void>;
|
||||
updateModalVisible: boolean;
|
||||
values: Partial<API.UserInfo>;
|
||||
}
|
||||
|
||||
const UpdateForm: React.FC<UpdateFormProps> = (props) => (
|
||||
<StepsForm
|
||||
stepsProps={{
|
||||
size: 'small',
|
||||
}}
|
||||
stepsFormRender={(dom, submitter) => {
|
||||
return (
|
||||
<Modal
|
||||
width={640}
|
||||
bodyStyle={{ padding: '32px 40px 48px' }}
|
||||
destroyOnClose
|
||||
title="规则配置"
|
||||
open={props.updateModalVisible}
|
||||
footer={submitter}
|
||||
onCancel={() => props.onCancel()}
|
||||
>
|
||||
{dom}
|
||||
</Modal>
|
||||
);
|
||||
}}
|
||||
onFinish={props.onSubmit}
|
||||
>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
name: props.values.name,
|
||||
nickName: props.values.nickName,
|
||||
}}
|
||||
title="基本信息"
|
||||
>
|
||||
<ProFormText
|
||||
width="md"
|
||||
name="name"
|
||||
label="规则名称"
|
||||
rules={[{ required: true, message: '请输入规则名称！' }]}
|
||||
/>
|
||||
<ProFormTextArea
|
||||
name="desc"
|
||||
width="md"
|
||||
label="规则描述"
|
||||
placeholder="请输入至少五个字符"
|
||||
rules={[
|
||||
{ required: true, message: '请输入至少五个字符的规则描述！', min: 5 },
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
target: '0',
|
||||
template: '0',
|
||||
}}
|
||||
title="配置规则属性"
|
||||
>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="target"
|
||||
label="监控对象"
|
||||
valueEnum={{
|
||||
0: '表一',
|
||||
1: '表二',
|
||||
}}
|
||||
/>
|
||||
<ProFormSelect
|
||||
width="md"
|
||||
name="template"
|
||||
label="规则模板"
|
||||
valueEnum={{
|
||||
0: '规则模板一',
|
||||
1: '规则模板二',
|
||||
}}
|
||||
/>
|
||||
<ProFormRadio.Group
|
||||
name="type"
|
||||
width="md"
|
||||
label="规则类型"
|
||||
options={[
|
||||
{
|
||||
value: '0',
|
||||
label: '强',
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '弱',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
<StepsForm.StepForm
|
||||
initialValues={{
|
||||
type: '1',
|
||||
frequency: 'month',
|
||||
}}
|
||||
title="设定调度周期"
|
||||
>
|
||||
<ProFormDateTimePicker
|
||||
name="time"
|
||||
label="开始时间"
|
||||
rules={[{ required: true, message: '请选择开始时间！' }]}
|
||||
/>
|
||||
<ProFormSelect
|
||||
name="frequency"
|
||||
label="监控对象"
|
||||
width="xs"
|
||||
valueEnum={{
|
||||
month: '月',
|
||||
week: '周',
|
||||
}}
|
||||
/>
|
||||
</StepsForm.StepForm>
|
||||
</StepsForm>
|
||||
);
|
||||
|
||||
export default UpdateForm;
|
||||
270
src/pages/Table/index.tsx
Normal file
270
src/pages/Table/index.tsx
Normal file
@@ -0,0 +1,270 @@
|
||||
import services from '@/services/demo';
|
||||
import {
|
||||
ActionType,
|
||||
FooterToolbar,
|
||||
PageContainer,
|
||||
ProDescriptions,
|
||||
ProDescriptionsItemProps,
|
||||
ProTable,
|
||||
} from '@ant-design/pro-components';
|
||||
import { Button, Divider, Drawer, message } from 'antd';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import CreateForm from './components/CreateForm';
|
||||
import UpdateForm, { FormValueType } from './components/UpdateForm';
|
||||
|
||||
const { addUser, queryUserList, deleteUser, modifyUser } =
|
||||
services.UserController;
|
||||
|
||||
/**
|
||||
* 添加节点
|
||||
* @param fields
|
||||
*/
|
||||
const handleAdd = async (fields: API.UserInfo) => {
|
||||
const hide = message.loading('正在添加');
|
||||
try {
|
||||
await addUser({ ...fields });
|
||||
hide();
|
||||
message.success('添加成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('添加失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 更新节点
|
||||
* @param fields
|
||||
*/
|
||||
const handleUpdate = async (fields: FormValueType) => {
|
||||
const hide = message.loading('正在配置');
|
||||
try {
|
||||
await modifyUser(
|
||||
{
|
||||
userId: fields.id || '',
|
||||
},
|
||||
{
|
||||
name: fields.name || '',
|
||||
nickName: fields.nickName || '',
|
||||
email: fields.email || '',
|
||||
},
|
||||
);
|
||||
hide();
|
||||
|
||||
message.success('配置成功');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('配置失败请重试！');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除节点
|
||||
* @param selectedRows
|
||||
*/
|
||||
const handleRemove = async (selectedRows: API.UserInfo[]) => {
|
||||
const hide = message.loading('正在删除');
|
||||
if (!selectedRows) return true;
|
||||
try {
|
||||
await deleteUser({
|
||||
userId: selectedRows.find((row) => row.id)?.id || '',
|
||||
});
|
||||
hide();
|
||||
message.success('删除成功，即将刷新');
|
||||
return true;
|
||||
} catch (error) {
|
||||
hide();
|
||||
message.error('删除失败，请重试');
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const TableList: React.FC<unknown> = () => {
|
||||
const [createModalVisible, handleModalVisible] = useState<boolean>(false);
|
||||
const [updateModalVisible, handleUpdateModalVisible] =
|
||||
useState<boolean>(false);
|
||||
const [stepFormValues, setStepFormValues] = useState({});
|
||||
const actionRef = useRef<ActionType>();
|
||||
const [row, setRow] = useState<API.UserInfo>();
|
||||
const [selectedRowsState, setSelectedRows] = useState<API.UserInfo[]>([]);
|
||||
const columns: ProDescriptionsItemProps<API.UserInfo>[] = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
tip: '名称是唯一的 key',
|
||||
formItemProps: {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: '名称为必填项',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
dataIndex: 'nickName',
|
||||
valueType: 'text',
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'gender',
|
||||
hideInForm: true,
|
||||
valueEnum: {
|
||||
0: { text: '男', status: 'MALE' },
|
||||
1: { text: '女', status: 'FEMALE' },
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'option',
|
||||
valueType: 'option',
|
||||
render: (_, record) => (
|
||||
<>
|
||||
<a
|
||||
onClick={() => {
|
||||
handleUpdateModalVisible(true);
|
||||
setStepFormValues(record);
|
||||
}}
|
||||
>
|
||||
配置
|
||||
</a>
|
||||
<Divider type="vertical" />
|
||||
<a href="">订阅警报</a>
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<PageContainer
|
||||
header={{
|
||||
title: 'CRUD 示例',
|
||||
}}
|
||||
>
|
||||
<ProTable<API.UserInfo>
|
||||
headerTitle="查询表格"
|
||||
actionRef={actionRef}
|
||||
rowKey="id"
|
||||
search={{
|
||||
labelWidth: 120,
|
||||
}}
|
||||
toolBarRender={() => [
|
||||
<Button
|
||||
key="1"
|
||||
type="primary"
|
||||
onClick={() => handleModalVisible(true)}
|
||||
>
|
||||
新建
|
||||
</Button>,
|
||||
]}
|
||||
request={async (params, sorter, filter) => {
|
||||
const { data, success } = await queryUserList({
|
||||
...params,
|
||||
// FIXME: remove @ts-ignore
|
||||
// @ts-ignore
|
||||
sorter,
|
||||
filter,
|
||||
});
|
||||
return {
|
||||
data: data?.list || [],
|
||||
success,
|
||||
};
|
||||
}}
|
||||
columns={columns}
|
||||
rowSelection={{
|
||||
onChange: (_, selectedRows) => setSelectedRows(selectedRows),
|
||||
}}
|
||||
/>
|
||||
{selectedRowsState?.length > 0 && (
|
||||
<FooterToolbar
|
||||
extra={
|
||||
<div>
|
||||
已选择{' '}
|
||||
<a style={{ fontWeight: 600 }}>{selectedRowsState.length}</a>{' '}
|
||||
项
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
await handleRemove(selectedRowsState);
|
||||
setSelectedRows([]);
|
||||
actionRef.current?.reloadAndRest?.();
|
||||
}}
|
||||
>
|
||||
批量删除
|
||||
</Button>
|
||||
<Button type="primary">批量审批</Button>
|
||||
</FooterToolbar>
|
||||
)}
|
||||
<CreateForm
|
||||
onCancel={() => handleModalVisible(false)}
|
||||
modalVisible={createModalVisible}
|
||||
>
|
||||
<ProTable<API.UserInfo, API.UserInfo>
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleAdd(value);
|
||||
if (success) {
|
||||
handleModalVisible(false);
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
rowKey="id"
|
||||
type="form"
|
||||
columns={columns}
|
||||
/>
|
||||
</CreateForm>
|
||||
{stepFormValues && Object.keys(stepFormValues).length ? (
|
||||
<UpdateForm
|
||||
onSubmit={async (value) => {
|
||||
const success = await handleUpdate(value);
|
||||
if (success) {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
if (actionRef.current) {
|
||||
actionRef.current.reload();
|
||||
}
|
||||
}
|
||||
}}
|
||||
onCancel={() => {
|
||||
handleUpdateModalVisible(false);
|
||||
setStepFormValues({});
|
||||
}}
|
||||
updateModalVisible={updateModalVisible}
|
||||
values={stepFormValues}
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<Drawer
|
||||
width={600}
|
||||
open={!!row}
|
||||
onClose={() => {
|
||||
setRow(undefined);
|
||||
}}
|
||||
closable={false}
|
||||
>
|
||||
{row?.name && (
|
||||
<ProDescriptions<API.UserInfo>
|
||||
column={2}
|
||||
title={row?.name}
|
||||
request={async () => ({
|
||||
data: row || {},
|
||||
})}
|
||||
params={{
|
||||
id: row?.name,
|
||||
}}
|
||||
columns={columns}
|
||||
/>
|
||||
)}
|
||||
</Drawer>
|
||||
</PageContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default TableList;
|
||||
Reference in New Issue
Block a user