Commit f49fa5dc authored by zhengjianqing's avatar zhengjianqing

Initial commit

parents
module.exports = {
extends: require.resolve('@umijs/max/eslint'),
};
/node_modules
/.env.local
/.umirc.local.ts
/config/config.local.ts
/src/.umi
/src/.umi-production
/src/.umi-test
/.umi
/.umi-production
/.umi-test
/dist
/.mfsu
.swc
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install max verify-commit $1
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no-install lint-staged --quiet
{
"*.{md,json}": [
"prettier --cache --write"
],
"*.{js,jsx}": [
"max lint --fix --eslint-only",
"prettier --cache --write"
],
"*.{css,less}": [
"max lint --fix --stylelint-only",
"prettier --cache --write"
],
"*.ts?(x)": [
"max lint --fix --eslint-only",
"prettier --cache --parser=typescript --write"
]
}
registry=https://registry.npmmirror.com/
strict-peer-dependencies=false
node_modules
.umi
.umi-production
{
"printWidth": 80,
"singleQuote": true,
"trailingComma": "all",
"proseWrap": "never",
"overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
}
module.exports = {
extends: require.resolve('@umijs/max/stylelint'),
};
import { defineConfig } from '@umijs/max';
export default defineConfig({
antd: {},
access: {},
model: {},
initialState: {},
request: {},
layout: {
title: '@umijs/max',
},
routes: [
{
path: '/',
redirect: '/home',
},
{
name: '首页',
path: '/home',
component: './Home',
},
{
name: '权限演示',
path: '/access',
component: './Access',
},
{
name: ' CRUD 示例',
path: '/table',
component: './Table',
},
{
name: ' 5000节点测试',
path: '/topo',
component: './Topo',
}
],
npmClient: 'pnpm',
});
# README
`@umijs/max` 模板项目,更多功能参考 [Umi Max 简介](https://umijs.org/docs/max/introduce)
const users = [
{ id: 0, name: 'Umi', nickName: 'U', gender: 'MALE' },
{ id: 1, name: 'Fish', nickName: 'B', gender: 'FEMALE' },
];
export default {
'GET /api/v1/queryUserList': (req: any, res: any) => {
res.json({
success: true,
data: { list: users },
errorCode: 0,
});
},
'PUT /api/v1/user/': (req: any, res: any) => {
res.json({
success: true,
errorCode: 0,
});
},
};
{
"private": true,
"author": "'zhengjianqing' <zhengjianqing@thinker.vc>",
"scripts": {
"dev": "max dev",
"build": "max build",
"format": "prettier --cache --write .",
"prepare": "husky install",
"postinstall": "max setup",
"setup": "max setup",
"start": "npm run dev"
},
"dependencies": {
"@ant-design/icons": "^5.0.1",
"@ant-design/pro-components": "^2.4.4",
"@meta2d/activity-diagram": "^1.0.0",
"@meta2d/chart-diagram": "^1.0.2",
"@meta2d/class-diagram": "^1.0.0",
"@meta2d/core": "^1.0.15",
"@meta2d/flow-diagram": "^1.0.0",
"@meta2d/form-diagram": "^1.0.2",
"@meta2d/fta-diagram": "^1.0.0",
"@meta2d/le5le-charts": "^1.0.1",
"@meta2d/sequence-diagram": "^1.0.0",
"@meta2d/svg": "^1.0.2",
"@umijs/max": "^4.0.69",
"antd": "^5.4.0",
"lodash": "^4.17.21",
"meta2d.js": "^1.0.1"
},
"devDependencies": {
"@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11",
"husky": "^8.0.3",
"lint-staged": "^13.2.0",
"prettier": "^2.8.7",
"prettier-plugin-organize-imports": "^3.2.2",
"prettier-plugin-packagejson": "^2.4.3",
"typescript": "^5.0.3"
}
}
\ No newline at end of file
This diff is collapsed.
export default (initialState: API.UserInfo) => {
// 在这里按照初始化数据定义项目中的权限,统一管理
// 参考文档 https://umijs.org/docs/max/access
const canSeeAdmin = !!(
initialState && initialState.name !== 'dontHaveAccess'
);
return {
canSeeAdmin,
};
};
// 运行时配置
// 全局初始化数据配置,用于 Layout 用户信息和权限初始化
// 更多信息见文档:https://umijs.org/docs/api/runtime-config#getinitialstate
export async function getInitialState(): Promise<{ name: string }> {
return { name: '@umijs/max' };
}
export const layout = () => {
return {
logo: 'https://img.alicdn.com/tfs/TB1YHEpwUT1gK0jSZFhXXaAtVXa-28-27.svg',
menu: {
locale: false,
},
};
};
.title {
margin: 0 auto;
font-weight: 200;
}
import { Layout, Row, Typography } from 'antd';
import React from 'react';
import styles from './Guide.less';
interface Props {
name: string;
}
// 脚手架示例组件
const Guide: React.FC<Props> = (props) => {
const { name } = props;
return (
<Layout>
<Row>
<Typography.Title level={3} className={styles.title}>
欢迎使用 <strong>{name}</strong>
</Typography.Title>
</Row>
</Layout>
);
};
export default Guide;
import Guide from './Guide';
export default Guide;
export const DEFAULT_NAME = 'Umi Max';
// 全局共享数据示例
import { DEFAULT_NAME } from '@/constants';
import { useState } from 'react';
const useUser = () => {
const [name, setName] = useState<string>(DEFAULT_NAME);
return {
name,
setName,
};
};
export default useUser;
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;
.container {
padding-top: 80px;
}
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;
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;
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;
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>{' '}
&nbsp;&nbsp;
</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;
.meta2D {
min-height: 600px;
width: 100%;
height: 100vh;
}
\ No newline at end of file
import React, { useEffect } from "react";
import {
ActionType,
FooterToolbar,
PageContainer,
ProDescriptions,
ProDescriptionsItemProps,
ProTable,
} from '@ant-design/pro-components';
import { Options, Meta2d } from "@meta2d/core";
import { flowPens } from "@meta2d/flow-diagram";
import { activityDiagram } from "@meta2d/activity-diagram";
import { classPens } from "@meta2d/class-diagram";
import { sequencePens, sequencePensbyCtx } from "@meta2d/sequence-diagram";
import { formPens } from "@meta2d/form-diagram";
import { Button, Divider, Drawer, message } from 'antd';
import styles from './index.less';
import _ from 'lodash';
const Topo: React.FC<unknown> = () => {
useEffect(() => {
window.meta2d = new Meta2d("meta2d", {
grid: true,
padding: 10,
disableTranslate: true,
disableScale: true,
activeColor: '#ff3300',
activeBackground: 'green',
});
meta2d.register(flowPens());
meta2d.register(activityDiagram());
meta2d.register(classPens());
meta2d.register(sequencePens());
meta2d.registerCanvasDraw(sequencePensbyCtx());
meta2d.registerCanvasDraw(formPens());
// const pen = {
// name: 'image',
// text: '',
// x: 100,
// y: 100,
// width: 40,
// height: 40,
// image: require('@/img/test.png')
// };
const pens = [];
const yArr = [];
for (let i = 0; i < 200; i++) {
for (let j = 0; j < 25; j++) {
const x = 10 + j * 58; // x坐标每次增加60
const y = 10 + i * 58; // y坐标每次增加60
yArr.push(y);
const pen = {
id: 'wind_' + i.toString() + "_" + j.toString(),
name: 'rectangle',
text: '',
x,
y,
locked: 1,//禁止编辑 + 移动;可选中、高亮、触发事件等
radio: true,
hover: false,
width: 40,
height: 40,
image: require('@/img/test.png'),
lineWidth: 0
};
pens.push(pen);
}
};
const maxHeight = _.max(yArr) + 100
console.log('yArr', yArr, `maxHeight is:`, maxHeight)
meta2d.addPens(pens);
const fn = (event: any, data: any) => {
console.log('event', event, `data is:`, data);
if (event === 'mouseup' && data?.pen) {
message.info(data?.pen?.id)
} else if (event === 'click' && data?.pen) {
const pen = data?.pen;
meta2d.setValue({ id: pen?.id, lineWidth: 4 });
meta2d.inactive();
}
};
meta2d.on('*', fn);
// meta2d.lock(1);
setTimeout(() => {
const oDomWidth = document.getElementById('J_meta_parent')?.offsetWidth;
meta2d.resize(1600, maxHeight);
const pen1 = meta2d.findOne('wind_4_0');
const pen2 = meta2d.findOne('wind_0_0');
}, 1000);
// 打开文件
//const json = []
// meta2d.open(json);
}, []);
return (
<PageContainer
header={{
title: 'Topo测试',
}}
>
<div className="main" id="J_meta_parent">
<div className={styles.meta2D} id="meta2d"></div>
</div>
</PageContainer>)
}
export default Topo;
/* eslint-disable */
// 该文件由 OneAPI 自动生成,请勿手动修改!
import { request } from '@umijs/max';
/** 此处后端没有提供注释 GET /api/v1/queryUserList */
export async function queryUserList(
params: {
// query
/** keyword */
keyword?: string;
/** current */
current?: number;
/** pageSize */
pageSize?: number;
},
options?: { [key: string]: any },
) {
return request<API.Result_PageInfo_UserInfo__>('/api/v1/queryUserList', {
method: 'GET',
params: {
...params,
},
...(options || {}),
});
}
/** 此处后端没有提供注释 POST /api/v1/user */
export async function addUser(
body?: API.UserInfoVO,
options?: { [key: string]: any },
) {
return request<API.Result_UserInfo_>('/api/v1/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: body,
...(options || {}),
});
}
/** 此处后端没有提供注释 GET /api/v1/user/${param0} */
export async function getUserDetail(
params: {
// path
/** userId */
userId?: string;
},
options?: { [key: string]: any },
) {
const { userId: param0 } = params;
return request<API.Result_UserInfo_>(`/api/v1/user/${param0}`, {
method: 'GET',
params: { ...params },
...(options || {}),
});
}
/** 此处后端没有提供注释 PUT /api/v1/user/${param0} */
export async function modifyUser(
params: {
// path
/** userId */
userId?: string;
},
body?: API.UserInfoVO,
options?: { [key: string]: any },
) {
const { userId: param0 } = params;
return request<API.Result_UserInfo_>(`/api/v1/user/${param0}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
params: { ...params },
data: body,
...(options || {}),
});
}
/** 此处后端没有提供注释 DELETE /api/v1/user/${param0} */
export async function deleteUser(
params: {
// path
/** userId */
userId?: string;
},
options?: { [key: string]: any },
) {
const { userId: param0 } = params;
return request<API.Result_string_>(`/api/v1/user/${param0}`, {
method: 'DELETE',
params: { ...params },
...(options || {}),
});
}
/* eslint-disable */
// 该文件由 OneAPI 自动生成,请勿手动修改!
import * as UserController from './UserController';
export default {
UserController,
};
/* eslint-disable */
// 该文件由 OneAPI 自动生成,请勿手动修改!
declare namespace API {
interface PageInfo {
/**
1 */
current?: number;
pageSize?: number;
total?: number;
list?: Array<Record<string, any>>;
}
interface PageInfo_UserInfo_ {
/**
1 */
current?: number;
pageSize?: number;
total?: number;
list?: Array<UserInfo>;
}
interface Result {
success?: boolean;
errorMessage?: string;
data?: Record<string, any>;
}
interface Result_PageInfo_UserInfo__ {
success?: boolean;
errorMessage?: string;
data?: PageInfo_UserInfo_;
}
interface Result_UserInfo_ {
success?: boolean;
errorMessage?: string;
data?: UserInfo;
}
interface Result_string_ {
success?: boolean;
errorMessage?: string;
data?: string;
}
type UserGenderEnum = 'MALE' | 'FEMALE';
interface UserInfo {
id?: string;
name?: string;
/** nick */
nickName?: string;
/** email */
email?: string;
gender?: UserGenderEnum;
}
interface UserInfoVO {
name?: string;
/** nick */
nickName?: string;
/** email */
email?: string;
}
type definitions_0 = null;
}
// 示例方法,没有实际意义
export function trim(str: string) {
return str.trim();
}
{
"extends": "./src/.umi/tsconfig.json"
}
import '@umijs/max/typings';
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment