Base on React's Admin Manager Scaffold.
为了兼顾 快速业务开发 和 统一页面交互、视觉效果 两种需求，提供一种采用 页面声明式描述 的开发管理系统前端应用的方案。
如果想开始一个 React 应用的开发，最快的方式是使用 create-react-app 快速生成一个 react 工程，其中包含了 webpack 的开发与构建配置，开发者只需要关注「如何使用 React 开发业务」即可，可以在不知道 webpack 运行细节的情况下工作。
create-react-app 就是一种 scaffold，帮助开发者快速搭建 react 工程的一个工具。
那么如果我想快速开始一个管理系统的开发呢？
按照普通的做法应该是使用 create-react-app 创建一个工程，然后找管理系统所需要的各种功能，例如需要处理路由、菜单、页面映射之间的关系，页面渲染规则，多人如何协作开发等。
@deer-ui/admin-scaffold 就是一个提供了管理系统所需要的工程的开发和构建环境，以及指导协作流程的 scaffold。
- 通过配置来描述业务流程以及对于的 UI
- 多页面导航控制（multiple router）
- 导航菜单无限嵌套
- 异步请求状态与对应的页面 UI 状态的关联
- 模版引擎
- 表格显示
- 表单控制
mkdir admin-scaffold-tester && cd "$_"
npm init && git init# yarn
yarn add react react-dom @deer-ui/admin-scaffold @mini-code/base-func @mini-code/request @deer-ui/core react-transition-group
# 使用 @mini-code/scripts 开发环境
yarn add @mini-code/scripts -D
# 或者 npm
npm i react react-dom @deer-ui/admin-scaffold @mini-code/base-func @mini-code/request @deer-ui/core react-transition-group --save
npm i @mini-code/scripts --save-dev打开 ./pacakges.json，添加项目运行 scripts
"scripts": {
"start": "PORT=8086 minictl start",
"build": "minictl build"
},<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Uke admin demo</title>
</head>
<body>
<div id="Main"></div>
</body>
</html>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/airbnb.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.7.1/css/all.min.css">import React from 'react';
import ReactDOM from 'react-dom';
import App from './main';
ReactDOM.render(
<App/>,
document.getElementById('Main')
);import React from 'react';
import { AdminWebScaffold, Link } from '@deer-ui/admin-scaffold';
import './style.scss'
const VersionInfo = {
numberVersion: 'v1.0.0'
};
const TestPage = (text = 'Test Page') => () => (
<div className="p20">
{text}
<Link
params={{
ID: 'testID',
data: '123'
}}
className="btn theme" to="TEST2">跳转到 TEST2</Link>
</div>
);
const pageComponents = {
TestPage: TestPage('TestPage'),
TestPage2: TestPage('TestPage2'),
};
const menuStore = [
{
title: '测试页面',
icon: 'table',
code: 'TestPage'
},
{
title: '一级菜单',
child: [
{
title: '测试页面2',
icon: 'table',
code: 'TestPage2'
},
{
title: '测试页面2',
icon: 'table',
code: 'TestPage3'
},
]
}
]
const userInfo = {
username: 'Alex'
}
const ScaffoldDemo = () => {
return (
<AdminWebScaffold
menuStore={menuStore}
username={userInfo.username}
versionInfo={VersionInfo}
userInfo={userInfo}
pageComponents={pageComponents}/>
);
}
export default ScaffoldDemo;// 引入 scss var
@import '@deer-ui/core/style/var.scss';
@import '@deer-ui/admin-scaffold/style/var.scss';
// 引入其他样式
@import '@deer-ui/core/style/index.scss';
@import '@deer-ui/core/style/color/set-color.scss';
@import '@deer-ui/admin-scaffold/style/index.scss';
@import '@deer-ui/admin-scaffold/style/layout/login.scss';{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"outDir": "./dist",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"noImplicitAny": false,
"strict": true,
"forceConsistentCasingInFileNames": true,
"declaration": true,
"module": "ES6",
"moduleResolution": "node",
"jsx": "react"
},
"include": [
"src"
],
"exclude": [
"src/**/test/*",
"dist",
"build"
]
}
项目参考 https://github.com/SANGET/admin-scaffold-starter
- public
- index.html
- src
- app.tsx
- main.tsx
- style.scss
- tsconfig.json
yarn start稍等片刻即可
- admin-dashboard 整合了上述内容的管理系统模版框架，开箱即用。
- Account: admin
- PW: 123
- 表格模版引擎
- 表单模版引擎
// 通用模版
import { ReportTemplate } from '@deer-ui/admin-scaffold/template-engine';
// 高阶模版 HOC
import { FormRender, HOCReportRender } from '@deer-ui/admin-scaffold/template-engine';
// 通用模版
const GenernalTMPL = () => {
const templateOptions = {};
return (
<ReportTemplate {...templateOptions} />
)
}
// 高阶模版 HOC
const HOC_TMPL_REPORT = () => {
return (
<HOCReportRender />
)
}封装了基于 React state 的异步请求管理，制定了异步请求在该页面的生命周期，适用于通用页面
import ActionAgent from '@deer-ui/admin-scaffold/action-agent';
// 继承获取 ActionAgent 的 api
class Page extends ActionAgent {
}