Compare commits
No commits in common. "develop" and "master" have entirely different histories.
@ -1 +0,0 @@
|
|||||||
APP_ENV=production
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
extends: require.resolve('@umijs/max/eslint'),
|
|
||||||
};
|
|
||||||
35
.gitignore
vendored
35
.gitignore
vendored
@ -1,17 +1,18 @@
|
|||||||
/node_modules
|
# Build and Release Folders
|
||||||
/.env.local
|
bin-debug/
|
||||||
/.umirc.local.ts
|
bin-release/
|
||||||
/config/config.local.ts
|
[Oo]bj/
|
||||||
/src/.umi
|
[Bb]in/
|
||||||
/src/.umi-production
|
|
||||||
/src/.umi-test
|
# Other files and folders
|
||||||
/.umi
|
.settings/
|
||||||
/.umi-production
|
|
||||||
/.umi-test
|
# Executables
|
||||||
/dist
|
*.swf
|
||||||
/.mfsu
|
*.air
|
||||||
.swc
|
*.ipa
|
||||||
aircraft-carrier-fleet
|
*.apk
|
||||||
dist
|
|
||||||
.idea
|
# Project files, i.e. `.project`, `.actionScriptProperties` and `.flexProperties`
|
||||||
pnpm-lock.yaml
|
# should NOT be excluded as they contain compiler settings and other important
|
||||||
|
# information for Eclipse / Flash Builder.
|
||||||
|
|||||||
@ -1,32 +0,0 @@
|
|||||||
stages:
|
|
||||||
- build
|
|
||||||
- package
|
|
||||||
- deploy
|
|
||||||
|
|
||||||
cache:
|
|
||||||
policy: pull
|
|
||||||
key: '$CI_COMMIT_REF_NAME'
|
|
||||||
paths:
|
|
||||||
- node_modules/
|
|
||||||
|
|
||||||
build:
|
|
||||||
image: registry.zhst.com/video-analysis/pnpm4
|
|
||||||
tags:
|
|
||||||
- linux
|
|
||||||
stage: build
|
|
||||||
script:
|
|
||||||
- chmod +x ./deploy/build.sh && ./deploy/build.sh
|
|
||||||
artifacts:
|
|
||||||
name: '${CI_PROJECT_NAME}_${CI_COMMIT_REF_NAME}_${CI_JOB_NAME}_${CI_PIPELINE_ID}'
|
|
||||||
paths:
|
|
||||||
- ./app/public/*
|
|
||||||
|
|
||||||
package:
|
|
||||||
tags:
|
|
||||||
- linux_shell
|
|
||||||
stage: package
|
|
||||||
script:
|
|
||||||
- chmod +x ./deploy/package.sh && ./deploy/package.sh
|
|
||||||
dependencies:
|
|
||||||
- build
|
|
||||||
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
#!/usr/bin/env sh
|
|
||||||
. "$(dirname -- "$0")/_/husky.sh"
|
|
||||||
|
|
||||||
npx --no-install max verify-commit $1
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
#!/usr/bin/env sh
|
|
||||||
. "$(dirname -- "$0")/_/husky.sh"
|
|
||||||
|
|
||||||
npx --no-install lint-staged --quiet
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
{
|
|
||||||
"*.{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"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
2
.npmrc
2
.npmrc
@ -1,2 +0,0 @@
|
|||||||
registry=https://registry.npmmirror.com/
|
|
||||||
@zhst:registry="http://10.0.0.77:4874"
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
node_modules
|
|
||||||
.umi
|
|
||||||
.umi-production
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"printWidth": 80,
|
|
||||||
"singleQuote": true,
|
|
||||||
"trailingComma": "all",
|
|
||||||
"proseWrap": "never",
|
|
||||||
"overrides": [{ "files": ".prettierrc", "options": { "parser": "json" } }],
|
|
||||||
"plugins": ["prettier-plugin-organize-imports", "prettier-plugin-packagejson"]
|
|
||||||
}
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
extends: require.resolve('@umijs/max/stylelint'),
|
|
||||||
};
|
|
||||||
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"cSpell.words": [
|
|
||||||
"qiankun"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
FROM alpine:latest
|
|
||||||
|
|
||||||
ADD ./app/public/ /app/public/
|
|
||||||
|
|
||||||
CMD [ "sh", "-c", "while true; do echo zhst-web; sleep 1; done" ]
|
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2024 dev
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
34
README.md
34
README.md
@ -1,5 +1,29 @@
|
|||||||
|
# micro-app
|
||||||
微前端母项目
|
|
||||||
# README
|
#### 介绍
|
||||||
|
微前端架构实例
|
||||||
`@umijs/max` 模板项目，更多功能参考 [Umi Max 简介](https://umijs.org/docs/max/introduce)
|
|
||||||
|
#### 软件架构
|
||||||
|
软件架构说明
|
||||||
|
|
||||||
|
|
||||||
|
#### 安装教程
|
||||||
|
|
||||||
|
1. xxxx
|
||||||
|
2. xxxx
|
||||||
|
3. xxxx
|
||||||
|
|
||||||
|
#### 使用说明
|
||||||
|
|
||||||
|
1. xxxx
|
||||||
|
2. xxxx
|
||||||
|
3. xxxx
|
||||||
|
|
||||||
|
#### 参与贡献
|
||||||
|
|
||||||
|
1. Fork 本仓库
|
||||||
|
2. 新建 Feat_xxx 分支
|
||||||
|
3. 提交代码
|
||||||
|
4. 新建 Pull Request
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,23 +0,0 @@
|
|||||||
import { defineConfig } from '@umijs/max';
|
|
||||||
import routes from './routes';
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
favicons: ['/assets/logo.jpg'],
|
|
||||||
access: {},
|
|
||||||
model: {},
|
|
||||||
dva: {},
|
|
||||||
request: {},
|
|
||||||
initialState: {},
|
|
||||||
layout: false,
|
|
||||||
qiankun: {
|
|
||||||
master: {
|
|
||||||
prefetch: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mfsu: false,
|
|
||||||
routes,
|
|
||||||
npmClient: 'pnpm',
|
|
||||||
define: {
|
|
||||||
APP_ENV: process.env.NODE_ENV || 'production',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
const routes = [
|
|
||||||
{
|
|
||||||
name: 'home',
|
|
||||||
path: '/',
|
|
||||||
redirect: '/material/home',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'cabinet',
|
|
||||||
path: '/cabinet/*',
|
|
||||||
microApp: 'cabinet',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'algorithm',
|
|
||||||
path: '/algorithm/*',
|
|
||||||
microApp: 'algorithm',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'video',
|
|
||||||
path: '/video/*',
|
|
||||||
microApp: 'video',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '物料库',
|
|
||||||
path: '/material/*',
|
|
||||||
microApp: 'material',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
export default routes;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
pnpm install
|
|
||||||
|
|
||||||
pnpm run build:master
|
|
||||||
|
|
||||||
mkdir -p ./app/public/
|
|
||||||
|
|
||||||
mv ./dist/* ./app/public/
|
|
||||||
|
|
||||||
cat ./app/public/index.html | head -n 7
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
#! /bin/bash
|
|
||||||
set -e
|
|
||||||
|
|
||||||
export DOCKER_CLI_EXPERIMENTAL=enabled
|
|
||||||
docker login registry.zhst.com -u zhst -p Zhst666\&
|
|
||||||
|
|
||||||
# docker build -t registry.zhst.com/${CI_PROJECT_NAMESPACE}/${CI_PROJECT_NAME}:${CI_COMMIT_REF_NAME//\//-}-${CI_PIPELINE_ID} -f Dockerfile .
|
|
||||||
# docker push registry.zhst.com/${CI_PROJECT_NAMESPACE}/${CI_PROJECT_NAME}:${CI_COMMIT_REF_NAME//\//-}-${CI_PIPELINE_ID}
|
|
||||||
docker buildx build --platform linux/arm64,linux/amd64 -t registry.zhst.com/${CI_PROJECT_NAMESPACE}/${CI_PROJECT_NAME}:${CI_COMMIT_REF_NAME//\//-}-${CI_PIPELINE_ID} -f Dockerfile . --push
|
|
||||||
|
|
||||||
1
global.d.ts
vendored
1
global.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
declare const APP_ENV: string;
|
|
||||||
@ -1,20 +0,0 @@
|
|||||||
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,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
};
|
|
||||||
34
package.json
34
package.json
@ -1,34 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "aircraft-carrier-fleet",
|
|
||||||
"private": true,
|
|
||||||
"author": "dev <710328466@qq.com>",
|
|
||||||
"scripts": {
|
|
||||||
"build:master": "cross-env APP_ENV=production max build",
|
|
||||||
"comp": "cross-env max g component",
|
|
||||||
"dev": "max dev",
|
|
||||||
"format": "prettier --cache --write .",
|
|
||||||
"postinstall": "max setup",
|
|
||||||
"page": "cross-env max g page",
|
|
||||||
"prepare": "husky install",
|
|
||||||
"setup": "max setup",
|
|
||||||
"start": "npm run dev"
|
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"@ant-design/icons": "^5.3.0",
|
|
||||||
"@ant-design/pro-components": "^2.6.49",
|
|
||||||
"@umijs/max": "^4.1.1",
|
|
||||||
"@zhst/func": "^0.8.1",
|
|
||||||
"antd": "^5.14.1",
|
|
||||||
"cross-env": "^7.0.3"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/react": "^18.2.57",
|
|
||||||
"@types/react-dom": "^18.2.19",
|
|
||||||
"husky": "^9.0.11",
|
|
||||||
"lint-staged": "^15.2.2",
|
|
||||||
"prettier": "^3.2.5",
|
|
||||||
"prettier-plugin-organize-imports": "^3.2.4",
|
|
||||||
"prettier-plugin-packagejson": "^2.4.11",
|
|
||||||
"typescript": "^5.3.3"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
export default (initialState: API.UserInfo) => {
|
|
||||||
// 在这里按照初始化数据定义项目中的权限，统一管理
|
|
||||||
// 参考文档 https://umijs.org/docs/max/access
|
|
||||||
const canSeeAdmin = !!(
|
|
||||||
initialState && initialState.name !== 'dontHaveAccess'
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
canSeeAdmin,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
export default function useQiankunStateForSlave() {
|
|
||||||
const [globalState, setGlobalState] = useState<any>({
|
|
||||||
fatherName: 'zhst',
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
globalState,
|
|
||||||
setGlobalState,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
68
src/app.ts
68
src/app.ts
@ -1,68 +0,0 @@
|
|||||||
import doRequest from '@/utils/request';
|
|
||||||
import useFatherAction from './actions';
|
|
||||||
|
|
||||||
// 运行时配置
|
|
||||||
export async function getInitialState(): Promise<{
|
|
||||||
name: string;
|
|
||||||
useLogin: boolean;
|
|
||||||
}> {
|
|
||||||
return {
|
|
||||||
name: '主应用',
|
|
||||||
useLogin: false,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// 给子应用暴露的方法
|
|
||||||
export const useQiankunStateForSlave = useFatherAction;
|
|
||||||
|
|
||||||
const hostname = location.hostname;
|
|
||||||
|
|
||||||
export const qiankun = {
|
|
||||||
apps: [
|
|
||||||
{
|
|
||||||
name: 'cabinet', // 盒子管理
|
|
||||||
entry:
|
|
||||||
APP_ENV === 'production'
|
|
||||||
? `//${hostname}:30068/cabinet/`
|
|
||||||
: '//localhost:30068/',
|
|
||||||
props: {},
|
|
||||||
singular: false,
|
|
||||||
credentials: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'video', // AI 智能分析仓
|
|
||||||
entry:
|
|
||||||
APP_ENV === 'production'
|
|
||||||
? `//${hostname}:30088/video/`
|
|
||||||
: '//localhost:30088/',
|
|
||||||
singular: false,
|
|
||||||
credentials: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'algorithm', // AI 算法分析
|
|
||||||
entry:
|
|
||||||
APP_ENV === 'production'
|
|
||||||
? `//${hostname}:30078/algorithm/`
|
|
||||||
: '//localhost:30078/',
|
|
||||||
singular: false,
|
|
||||||
credentials: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'material', // 物料库
|
|
||||||
entry:
|
|
||||||
APP_ENV === 'production'
|
|
||||||
? `//${hostname}:30098/material/`
|
|
||||||
: '//localhost:30098/',
|
|
||||||
singular: false,
|
|
||||||
credentials: true,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
lifeCycles: {
|
|
||||||
// 所有子应用在挂载完成时，打印 props 信息
|
|
||||||
async afterMount() {
|
|
||||||
// console.log('子应用已全部加载:', props);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const request = doRequest;
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
@ -1,4 +0,0 @@
|
|||||||
.title {
|
|
||||||
margin: 0 auto;
|
|
||||||
font-weight: 200;
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
import Guide from './Guide';
|
|
||||||
export default Guide;
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
* {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
.layout {
|
|
||||||
&_tag {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,33 +0,0 @@
|
|||||||
import { SettingOutlined, ShopOutlined } from '@ant-design/icons';
|
|
||||||
import { Outlet } from '@umijs/max';
|
|
||||||
import { FloatButton } from 'antd';
|
|
||||||
import React from 'react';
|
|
||||||
import styles from './index.less';
|
|
||||||
|
|
||||||
const Layout = () => {
|
|
||||||
return (
|
|
||||||
<div className={styles.layout}>
|
|
||||||
<FloatButton.Group
|
|
||||||
trigger="click"
|
|
||||||
type="primary"
|
|
||||||
style={{ right: 32 }}
|
|
||||||
icon={<SettingOutlined />}
|
|
||||||
>
|
|
||||||
<FloatButton
|
|
||||||
tooltip="物料库"
|
|
||||||
onClick={() =>
|
|
||||||
(location.href = 'http://10.0.0.222:30098/communal-cabinets')
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<FloatButton
|
|
||||||
tooltip="组件库"
|
|
||||||
onClick={() => (location.href = 'http://10.0.0.222')}
|
|
||||||
/>
|
|
||||||
<FloatButton tooltip="demo 展示" icon={<ShopOutlined />} />
|
|
||||||
</FloatButton.Group>
|
|
||||||
<Outlet />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Layout;
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
// 全局共享数据示例
|
|
||||||
import { DEFAULT_NAME } from '@/constants';
|
|
||||||
import { useState } from 'react';
|
|
||||||
|
|
||||||
const useUser = () => {
|
|
||||||
const [name, setName] = useState<string>(DEFAULT_NAME);
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
setName,
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
export default useUser;
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,138 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,270 +0,0 @@
|
|||||||
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;
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
export default function HomePage() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>error</h2>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
export default function HomePage() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h2>welcome home !</h2>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
export const API_URL =
|
|
||||||
APP_ENV === 'production'
|
|
||||||
? 'http://10.0.0.222:31300'
|
|
||||||
: 'http://10.0.0.222:31300';
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
/**
|
|
||||||
* 通过 url 获取想要的参数
|
|
||||||
* @param key
|
|
||||||
* @param url
|
|
||||||
*/
|
|
||||||
export const getValueByUrlParams = (url: string) => {
|
|
||||||
if (url.indexOf('?') < 0) return;
|
|
||||||
|
|
||||||
const _params = new URLSearchParams(url.split('?')[1]);
|
|
||||||
|
|
||||||
return _params;
|
|
||||||
};
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
import type { RequestConfig } from '@umijs/max';
|
|
||||||
import { API_URL } from './constants';
|
|
||||||
|
|
||||||
const doRequest: RequestConfig = {
|
|
||||||
timeout: 1000,
|
|
||||||
baseURL: API_URL,
|
|
||||||
errorConfig: {
|
|
||||||
errorHandler(error, opts) {
|
|
||||||
console.log('errorHandler', error, opts);
|
|
||||||
// if (opts?.skipErrorHandler) throw error
|
|
||||||
// try {
|
|
||||||
// const { res } = ctx;
|
|
||||||
// const d = await res.text();
|
|
||||||
|
|
||||||
// if (res.status === 401 && store.user.isLogin) {
|
|
||||||
// store.user.resetLoginState();
|
|
||||||
// message.warning('登录过期，请重新登录!');
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
// const isEmptyRes = d === '' || d.replace(/\s/g,"")=== 'tokenisinvalid'; //有些后端接口成功会返回空 做下兼容
|
|
||||||
// const body = !isEmptyRes ? JSON.parse(d || '{}') : d;
|
|
||||||
// const sessionCode = sessionStorage.getItem('zhst_errcode') || '{}'
|
|
||||||
// const ERROR_CODE = JSON.parse(sessionCode);
|
|
||||||
|
|
||||||
// if (Number(res.status) === 200) {
|
|
||||||
// ctx.res = body;
|
|
||||||
// } else {
|
|
||||||
// // 先判断Grpc-Metadata-Errorx-Message
|
|
||||||
// let errMsg = ERROR_CODE[body.code]?.value || body.message || '您的网络发生异常，无法连接服务器'
|
|
||||||
// toast && message.error(errMsg || body);
|
|
||||||
// ctx.res = {
|
|
||||||
// code: body.code,
|
|
||||||
// message: errMsg
|
|
||||||
// };
|
|
||||||
// }
|
|
||||||
|
|
||||||
// } catch (error) {
|
|
||||||
// if (get(error, 'type') !== 'CustomError') {
|
|
||||||
// toast && message.error('您的网络发生异常，无法连接服务器');
|
|
||||||
// }
|
|
||||||
// throw error;
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
errorThrower(res) {
|
|
||||||
console.log('res', res);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// 请求
|
|
||||||
requestInterceptors: [
|
|
||||||
// 一个二元组，第一个元素是 request 拦截器，第二个元素是错误处理
|
|
||||||
[
|
|
||||||
(url, options) => {
|
|
||||||
return {
|
|
||||||
url,
|
|
||||||
options: {
|
|
||||||
...options,
|
|
||||||
headers: {
|
|
||||||
authorization: 'test',
|
|
||||||
// ...(refererSuffix ? { zhst_referer: `${baseUrl}${refererSuffix}` } : {}),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
return Promise.reject(error);
|
|
||||||
},
|
|
||||||
],
|
|
||||||
],
|
|
||||||
// 返回
|
|
||||||
responseInterceptors: [
|
|
||||||
// 一个二元组，第一个元素是 request 拦截器，第二个元素是错误处理
|
|
||||||
[
|
|
||||||
(response) => {
|
|
||||||
if (response.status !== 200) {
|
|
||||||
throw Error(JSON.stringify(response.data));
|
|
||||||
}
|
|
||||||
return response;
|
|
||||||
},
|
|
||||||
(error) => {
|
|
||||||
return Promise.reject(error);
|
|
||||||
},
|
|
||||||
],
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default doRequest;
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"jsx": "react"
|
|
||||||
},
|
|
||||||
"extends": "./src/.umi/tsconfig.json"
|
|
||||||
}
|
|
||||||
1
typings.d.ts
vendored
1
typings.d.ts
vendored
@ -1 +0,0 @@
|
|||||||
import '@umijs/max/typings';
|
|
||||||
Loading…
Reference in New Issue
Block a user