@deer-ui/admin-scaffold
Advanced tools
Base on React's Admin Manager Scaffold.
为了兼顾 快速业务开发 和 统一页面交互、视觉效果 两种需求，提供一种采用 页面声明式描述 的开发管理系统前端应用的方案。
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
yarn start
稍等片刻即可
// 通用模版
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 {
}
FAQs
Base on React's Admin Manager Scaffold.
We found that @deer-ui/admin-scaffold demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.