Ant Design Pro總結篇

- Dashboard
- 分析頁
- 監控頁
- 工作臺
- 表單頁
- 基礎表單頁
- 分步表單頁
- 高階表單頁
- 列表頁
- 查詢表格
- 標準列表
- 卡片列表
- 搜尋列表（專案/應用/文章）
- 詳情頁
- 基礎詳情頁
- 高階詳情頁
- 結果
- 成功頁
- 失敗頁
- 異常
- 403 無許可權
- 404 找不到
- 500 伺服器出錯
- 個人頁
- 個人中心
- 個人設定
- 帳戶
- 登入
- 註冊
- 註冊成功

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new# 安裝腳手架

├── mock# 本地模擬資料
├── node_modules# 依賴庫
├── public
│├── favicon.ico# Favicon
│└── index.html# HTML 入口模板
├── src
│├── common# 應用公用配置，如導航資訊
│├── components# 業務通用元件
│├── e2e# 整合測試用例
│├── layouts# 通用佈局
│├── models# dva model
│├── routes# 業務頁面入口和常用模板
│├── services# 後臺介面服務
│├── utils# 工具庫
│├── g2.js# 視覺化圖形配置
│├── polyfill.js# 相容性墊片
│├── theme.js# 主題配置
│├── index.js# 應用入口
│├── index.less# 全域性樣式
│└── router.js# 路由入口
├── tests# 測試工具
├── .editorconfig# 編輯器配置
├── .eslintrc# js程式碼檢測工具
├── .ga# 未知
├── .gitignore# git版本配置
├── .roadhogrc# roadhog配置
├── .roadhogrc.mock.js# roadhog的模擬配置
├── .stylelintrc# css程式碼審查配置
├── .travis.yml# travis持續構建工具配置
├── package.json# web前端專案配置檔案
├── README.md
└──

"entry": "src/pages/\*.js"

"extraBabelPlugins": ["transform-runtime"],
"env": {
"development": {
"extraBabelPlugins": ["dva-hmr"]
}
}

"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr",
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties",
["import", { "libraryName": "antd", "style": true }]
]
},
"production": {
"extraBabelPlugins": [
"transform-runtime",
"transform-decorators-legacy",
"transform-class-properties",
["import", { "libraryName": "antd", "style": true }]
]
}
}

module.exports = [{
path: '/',
component: '../layouts/BasicLayout',// 指定以下頁面的佈局
routes: [
// dashboard
{ path: '/', redirect: '/dashboard/analysis' },
{
path: '/dashboard',
name: 'dashboard',
icon: 'dashboard',
routes: [
{ path: '/dashboard/analysis', name: 'analysis', component: './Dashboard/Analysis' },
{ path: '/dashboard/monitor', name: 'monitor', component: './Dashboard/Monitor' },
{ path: '/dashboard/workplace', name: 'workplace', component: './Dashboard/Workplace' },
],
},
],
}]

{
name: 'dashboard',
icon: 'dashboard',
hideInMenu: true,
hideChildrenInMenu: true,
hideInBreadcrumb: true,
authority: ['admin'],
}

{
'/': { path: '/', redirect: '/dashboard/analysis', locale: 'menu' },
'/dashboard/analysis': {
name: 'analysis',
component: './Dashboard/Analysis',
locale: 'menu.dashboard.analysis',
},
...
}

 // app
{
path: '/',
component: '../layouts/BasicLayout',
routes: [
// dashboard
{ path: '/', redirect: '/dashboard/analysis' },
{ path :'/dashboard/test',component:"./Dashboard/Test"},
...
},

module.exports = [
// user
{
path: '/user',
component: '../layouts/UserLayout',
routes:[...]
},
// app
{
path: '/',
component: '../layouts/BasicLayout',
routes:[...]
},
// new
{
path: '/new',
component: '../layouts/new_page',
routes:[...]
},
]

{ 
path: '/dashboard/:page',
hideInMenu:true, 
name: 'analysis', 
component: './Dashboard/Analysis' 
},

import router from 'umi/router';

router.push('/dashboard/anyParams')

//or

import Link from 'umi/link';

<Link to="/dashboard/anyParams">go</Link>

@import "~antd/lib/style/themes/default.less";

// MainComponent.js
export default ({ ... }) => (...);

// SubComponent1.js
export default ({ ... }) => (...);

// SubComponent2.js
export default ({ ... }) => (...);

// index.js
import MainComponent from './MainComponent';
import SubComponent1 from './SubComponent1';
import SubComponent2 from './SubComponent2';

MainComponent.SubComponent1 = SubComponent1;
MainComponent.SubComponent2 = SubComponent2;
export default MainComponent;

// index.js
import React from 'react';
import styles from './index.less';// 按照 CSS Modules 的方式引入樣式檔案。

export default ({ src, desc, style }) => (
<div style={style} className={styles.imageWrapper}>
<img className={styles.img} src={src} alt={desc} />
{desc && <div className={styles.desc}>{desc}</div>}
</div>
);

// index.less
.imageWrapper {
padding: 0 20px 8px;
background: #f2f4f5;
width: 400px;
margin: 0 auto;
text-align: center;
}

.img {
vertical-align: middle;
max-width: calc(100% - 32px);
margin: 2.4em 1em;
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
}

import React from 'react';
import ImageWrapper from '@/components/ImageWrapper';// @ 表示相對於原始檔根目錄

export default () => (
<ImageWrapper
src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"
desc="示意圖"
/>
);

// example.js
import styles from './example.less';

export default ({ title }) => <div className={styles.title}>{title}</div>;

// example.less
.title {
color: @heading-color;
font-weight: 600;
margin-bottom: 16px;
}

// example.less
.title {
color: @heading-color;
font-weight: 600;
margin-bottom: 16px;
}

/* 定義全域性樣式 */
:global(.text) {
font-size: 16px;
}

/* 定義多個全域性樣式 */
:global {
.footer {
color: #ccc;
}
.sider {
background: #ebebeb;
}
}

<div class="title___3TqAx">title</div>

html, body, :global(#root) {
height: 100%;
}

body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

// temporary font size patch
:global(.ant-tag) {
font-size: 12px;
}

services/
user.js
api.js
...

// services/user.js
import request from '../utils/request';

export async function query() {
return request('/api/users');
}

export async function queryCurrent() {
return request('/api/currentUser');
}

// models/user.js
import { queryCurrent } from '../services/user';
...
effects: {
*fetch({ payload }, { call, put }) {
...
const response = yield call(queryUsers);
...
},
}

effects: {
*fetch({ payload }, { call, put }) {
yield put({
type: 'changeLoading',
payload: true,
});
// 非同步請求 1
const response = yield call(queryFakeList, payload);
yield put({
type: 'save',
payload: response,
});
// 非同步請求 2
const response2 = yield call(queryFakeList2, payload);
yield put({
type: 'save2',
payload: response2,
});
yield put({
type: 'changeLoading',
payload: false,
});
},
},

$ npm install react-quill --save

import React from 'react';
import { Button, notification, Card } from 'antd';
import ReactQuill from 'react-quill'; 
import 'react-quill/dist/quill.snow.css';

export default class NewPage extends React.Component {
state = {
value: 'test',
};

handleChange = (value) => {
this.setState({
value,
})
};

prompt = () => {
notification.open({
message: 'We got value:',
description: <span dangerouslySetInnerHTML={{ __html: this.state.value }}></span>,
});
};

render() {
return (
<Card title="富文字編輯器">
<ReactQuill value={this.state.value} onChange={this.handleChange} />
<Button style={{ marginTop: 16 }} onClick={this.prompt}>Prompt</Button>
</Card>
);
}
}

import { ChartCard, MiniBar } from '@/components/Charts';
import { Tooltip, Icon } from 'antd';

const visitData = [
{
x: "2017-09-01",
y: 100
},
{
x: "2017-09-02",
y: 120
},
{
x: "2017-09-03",
y: 88
},
{
x: "2017-09-04",
y: 65
}
];

ReactDOM.render(
<ChartCard
title="支付筆數"
action={
<Tooltip title="支付筆數反應交易質量">
<Icon type="exclamation-circle-o" />
</Tooltip>
}
total="6,500"
contentHeight={46}
>
<MiniBar height={46} data={visitData} />
</ChartCard>,
mountNode
);

npm install bizcharts --save

import { Chart, Axis, Tooltip, Geom } from 'bizcharts';

const data = [...];

<Chart height={400} data={data} forceFit>
<Axis name="month" />
<Axis name="temperature" label={{ formatter: val => `${val}°C` }} />
<Tooltip crosshairs={{ type : "y" }} />
<Geom type="line" position="month*temperature" size={2} color={'city'} />
<Geom type='point' position="month*temperature" size={4} color={'city'} />
</Chart>

<Icon type="heart" style={{ fontSize: '16px', color: 'hotpink' }} />

//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js

.icon {
width: 1em;
height: 1em;
fill: currentColor;
vertical-align: -.125em;
}

<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-ali-pay"></use>
</svg>

import { Icon } from 'antd';

const IconFont = Icon.createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_405362_lyhvoky9rc7ynwmi.js'
});

export default IconFont;

<IconFont type="icon-ali-pay" style={{ fontSize: '16px', color: 'lightblue' }} />

export default {
// 支援值為 Object 和 Array
'GET /api/users': { users: [1, 2] },

// GET POST 可省略
'/api/users/1': { id: 1 },

// 支援自定義函式，API 參考 express@4
'POST /api/users/create': (req, res) => { res.end('OK'); },
};

...
theme: {
'font-size-base': '14px',
'badge-font-size': '12px',
'btn-font-size-lg': '@font-size-base',
'menu-dark-bg': '#00182E',
'menu-dark-submenu-bg': '#000B14',
'layout-sider-background': '#00182E',
'layout-body-background': '#f0f2f5',
};
...

{
path: '/form',
icon: 'form',
name: 'form',
routes:[{
path: '/form/basic-form',
name: 'basicform',
component: './Forms/BasicForm',
}, {
path: '/form/step-form',
name: 'stepform',
component: './Forms/StepForm',
authority: ['guest'], // 配置准入許可權，可以配置多個角色
}, {
path: '/form/advanced-form',
name: 'advancedform',
component: './Forms/AdvancedForm',
authority: ['admin'], // 配置准入許可權，可以配置多個角色
}],
}

<AuthorizedRoute
path="/"
render={props => <BasicLayout {...props} />}
authority={['admin', 'user', 'guest']}
redirectPath="/user/login"
/>

const menuData = [{
name: '題庫管理',
path: 'question',
icon: 'warning',
authority: ['admin', 'user'],
children: [{
name: '題庫列表',
path: 'list',
}, {
name: '編輯題目',
path: 'create-question',
hideInMenu: true,
}, {
name: '科目管理'
}]
}, {
name: '賬號管理',
icon: 'warning',
path: 'account',
children: [{
name: '賬號列表',
path: 'list',
authority: 'admin',
}, {
name: '建設中',
path: '',
authority: ['admin', 'user'],
}]
}]

effects：{
* login({payload}, {call, put}) {
const response = yield call(login, payload);
yield put({
type: 'changeLoginStatus',
payload: response,
});
// 登入成功以後更新許可權，跳轉頁面
if (response && response.code === '0000') {
reloadAuthorized();
yield put(routerRedux.push('/'));
}
},
}，
reducers: {
changeLoginStatus(state, {payload}) {
let _status = "ok";
let _user = "admin";
setToken("token");
setAuthority(_user);//設定許可權
return {
...state,
status: _status,
type: 'account',
};
},
}

//設定身份
export function setAuthority(authority) {
return localStorage.setItem('antd-pro-authority', authority);
}
//獲取身份
export function getAuthority() {
return localStorage.getItem('antd-pro-authority');
}

import RenderAuthorized from '../components/Authorized';
import { getAuthority } from './authority';
let Authorized = RenderAuthorized(getAuthority());
const reloadAuthorized = () => {
Authorized = RenderAuthorized(getAuthority());
};
export { reloadAuthorized };
export default Authorized;
RenderAuthorized: (currentAuthority: string | () => string) => Authorized

$ npm run build

$ npm run analyze

export default {
history: 'hash', // 預設是 browser
}

"proxy": {
"/api": {
"target": "http://xxx:xx/",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
},

"proxy": {
"/test": {
"target": "http://xxx:xx/",
"changeOrigin": true,
"pathRewrite": { "^/test" : "" }
},
"/cross": {
"target": "http://jsonplaceholder.typicode.com",
"changeOrigin": true,
"pathRewrite": {"^/cross": ""}
} // 此處有一點需要注意，不能在最後一個代理物件後面加逗號，否則會報錯！！！
},

// effects將按順序執行
const response = yield call(fetch, '/users');
const res = yield call(fetch, '/roles');

// effects將會同步執行
const [response, res] = yield [
call(fetch, '/users'),
call(fetch, '/roles'),
]