uke-admin-web-scaffold

v1.2.4

Published

2 years ago

Base on React's Admin Manager Scaffold.

Downloads

430

0High
0Medium
0Low

sangett

uke-admin-web-scaffold

Base on React's Admin Manager Scaffold.

在线文档

特性

多标签页共存
前端路由导航
可无限嵌套的导航菜单
各种可自定义的插件接口
- 状态栏 Statusabar
- 脚注 Footer
模版引擎
- 表格引擎 ReportTemplateEngin
- 表单引擎 FormTemplateEngin
异步请求状态与 React state 的数据绑定封装 (ActionAgent)
前端资源发布模块

开始

新建目录

mkdir admin-scaffold-tester && cd "$_"
npm init && git init

安装依赖

为了不与实际项目使用的依赖冲突重复，uke-admin-web-scaffold 只指定了依赖，并没有实际安装对应依赖

# yarn
yarn add react react-dom uke-admin-web-scaffold basic-helper react-transition-group uke-request ukelli-ui unistore

# 使用 uke-scripts 开发环境
yarn add uke-scripts -D

# 或者 npm
npm i react react-dom uke-admin-web-scaffold basic-helper react-transition-group uke-request ukelli-ui unistore --save

npm i uke-scripts --save-dev

添加 npm scripts

打开 ./pacakges.json，添加项目运行 scripts

"scripts": {
  "start": "PORT=8086 ukectl start",
  "build": "ukectl build"
},

项目结构

项目参考 https://github.com/SANGET/admin-scaffold-starter

public
- index.html
src
- app.tsx
- main.tsx
- style.scss
tsconfig.json

1. 添加 /public/index.html

<!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://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.6.2/themes/light.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

2. 添加 /src/app.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './main';

ReactDOM.render(
  <App/>,
  document.getElementById('Main')
);

3. 添加 /src/main.tsx

import React from 'react';
import { AdminWebScaffold, Link } from 'uke-admin-web-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: 'uke-user'
}

const ScaffoldDemo = () => {
  return (
    <AdminWebScaffold
      menuStore={menuStore}
      username={userInfo.username}
      versionInfo={VersionInfo}
      userInfo={userInfo}
      pageComponents={pageComponents}/>
  );
}

export default ScaffoldDemo;

4. 添加 /src/style.scss

// 引入 scss var
@import 'ukelli-ui/style/var.scss';
@import 'uke-admin-web-scaffold/style/var.scss';

// 引入其他样式
@import 'ukelli-ui/style/index.scss';
@import 'ukelli-ui/style/color/set-color.scss';
@import 'uke-admin-web-scaffold/style/index.scss';
@import 'uke-admin-web-scaffold/style/layout/login.scss';

5. 添加 /tsconfig.json

{
  "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"
  ]
}

运行

yarn start

稍等片刻即可

深入了解

通用模版和高阶模版

表格模版引擎
表单模版引擎

// 通用模版
import { ReportTemplate } from 'uke-admin-web-scaffold/template-engine';

// 高阶模版 HOC
import { FormRender, HOCReportRender } from 'uke-admin-web-scaffold/template-engine';

// 通用模版
const GenernalTMPL = () => {
  const templateOptions = {};
  return (
    <ReportTemplate {...templateOptions} />
  )
}

// 高阶模版 HOC
const HOC_TMPL_REPORT = () => {
  return (
    <HOCReportRender />
  )
}

请求代理机制 ActionAgent

封装了基于 React state 的异步请求管理，制定了异步请求在该页面的生命周期，适用于通用页面

import ActionAgent from 'uke-admin-web-scaffold/action-agent';

// 继承获取 ActionAgent 的 api
class Page extends ActionAgent {
  
}

详情参考

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

uke-admin-web-scaffold

特性

开始

新建目录

安装依赖

添加 npm scripts

项目结构

1. 添加 /public/index.html

2. 添加 /src/app.tsx

3. 添加 /src/main.tsx

4. 添加 /src/style.scss

5. 添加 /tsconfig.json

运行

相关项目

深入了解

通用模版和高阶模版

请求代理机制 ActionAgent

特殊模块说明