mirror of
https://github.com/zuiidea/antd-admin.git
synced 2026-10-20 08:16:39 +00:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
37deddc911 | ||
|
|
52ee780e40 | ||
|
|
057853cfde | ||
|
|
c0222c3957 | ||
|
|
00d8fc5ea5 | ||
|
|
1e08d7adaa | ||
|
|
a2b4ee4047 | ||
|
|
c6b477c993 | ||
|
|
548d7a8ddb | ||
|
|
755c1250e5 | ||
|
|
c5ebb91980 | ||
|
|
ae12492887 | ||
|
|
28a5863701 | ||
|
|
bf65aa5478 | ||
|
|
acd3fe8337 | ||
|
|
3ad5a6cfb6 | ||
|
|
c278c8f6f8 | ||
|
|
71c75e15ff | ||
|
|
ec8db0e0fb | ||
|
|
2a3587bae5 | ||
|
|
a33772cbbc | ||
|
|
89c58b2f98 | ||
|
|
b31bd32ca2 | ||
|
|
f113fbb238 | ||
|
|
ce1d957212 | ||
|
|
7f40ac6a60 | ||
|
|
3a01626df9 | ||
|
|
6df97916fa | ||
|
|
3378510166 | ||
|
|
edf1158351 | ||
|
|
e4bd4e9aa0 | ||
|
|
5904eae0c9 | ||
|
|
7f26153472 | ||
|
|
4b9e142aa8 | ||
|
|
2679361559 | ||
|
|
2d246655e0 | ||
|
|
04b147d33f | ||
|
|
81801983a6 | ||
|
|
e484b89518 | ||
|
|
bfff28411d | ||
|
|
ae97c9d18a | ||
|
|
a063d8be39 | ||
|
|
79eab09941 | ||
|
|
2e3cb5970d | ||
|
|
460a8c906b | ||
|
|
05a86e2f56 | ||
|
|
0295da6326 |
@@ -6,6 +6,7 @@
|
||||
"comma-dangle": [2, "always-multiline"],
|
||||
"max-len": 0,
|
||||
"react/jsx-first-prop-new-line": 0,
|
||||
"react/jsx-filename-extension": 0,
|
||||
"space-before-function-paren": [2, "always"],
|
||||
"no-unused-expressions": [0, {
|
||||
"allowShortCircuit": true,
|
||||
@@ -18,10 +19,23 @@
|
||||
"no-param-reassign": 0,
|
||||
"no-restricted-syntax": 0,
|
||||
"no-eval": 0,
|
||||
"no-continue": 0,
|
||||
"react/jsx-no-bind": 0,
|
||||
"no-unused-vars": [2, { "ignoreRestSiblings": true }],
|
||||
"no-underscore-dangle": 0,
|
||||
"global-require": 0,
|
||||
"import/no-unresolved": 0,
|
||||
"import/extensions": 0,
|
||||
"jsx-a11y/href-no-hash": 0,
|
||||
"react/no-array-index-key": 0,
|
||||
"react/require-default-props": 0,
|
||||
"react/forbid-prop-types": 0,
|
||||
"react/no-string-refs": 0,
|
||||
"react/no-find-dom-node": 0,
|
||||
"import/no-extraneous-dependencies": 0,
|
||||
"import/prefer-default-export": 0,
|
||||
"react/no-danger": 0,
|
||||
"jsx-a11y/no-static-element-interactions": 0,
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"parserOptions": {
|
||||
@@ -31,5 +45,8 @@
|
||||
"jsx": true,
|
||||
"experimentalObjectRestSpread": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"settings": {
|
||||
"import/resolver": "node"
|
||||
}
|
||||
}
|
||||
|
||||
+46
-16
@@ -1,27 +1,57 @@
|
||||
const path = require('path')
|
||||
const { version } = require('./package.json')
|
||||
|
||||
const svgSpriteDirs = [
|
||||
path.resolve(__dirname, 'src/svg/'),
|
||||
require.resolve('antd').replace(/index\.js$/, ''),
|
||||
require.resolve('antd').replace(/index\.js$/, '')
|
||||
]
|
||||
|
||||
export default {
|
||||
entry: 'src/index.js',
|
||||
svgSpriteLoaderDirs: svgSpriteDirs,
|
||||
"theme": "./theme.config.js",
|
||||
"env": {
|
||||
"development": {
|
||||
"extraBabelPlugins": [
|
||||
"dva-hmr",
|
||||
"transform-runtime",
|
||||
["import", { "libraryName": "antd", "style": true }]
|
||||
entry : 'src/index.js',
|
||||
svgSpriteLoaderDirs : svgSpriteDirs,
|
||||
theme : "./theme.config.js",
|
||||
publicPath : `/${version}/`,
|
||||
outputPath : `./dist/${version}`,
|
||||
// 接口代理示例
|
||||
// "proxy": {
|
||||
// "/api/v1": {
|
||||
// "target": "http://api.zuiidea.com",
|
||||
// "changeOrigin": true,
|
||||
// "pathRewrite": { "^/api/v1" : "/v1" }
|
||||
// },
|
||||
// "/api/v2": {
|
||||
// "target": "http://192.168.0.110",
|
||||
// "changeOrigin": true,
|
||||
// "pathRewrite": { "^/api/v2" : "/api/v2" }
|
||||
// }
|
||||
// },
|
||||
env : {
|
||||
development: {
|
||||
extraBabelPlugins: [
|
||||
"dva-hmr",
|
||||
"transform-runtime",
|
||||
[
|
||||
"import", {
|
||||
"libraryName": "antd",
|
||||
"style": true
|
||||
}
|
||||
]
|
||||
},
|
||||
"production": {
|
||||
"extraBabelPlugins": [
|
||||
"transform-runtime",
|
||||
["import", { "libraryName": "antd", "style": true}]
|
||||
]
|
||||
},
|
||||
production: {
|
||||
extraBabelPlugins: [
|
||||
"transform-runtime",
|
||||
[
|
||||
"import", {
|
||||
"libraryName": "antd",
|
||||
"style": true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
dllPlugin : {
|
||||
exclude: ["babel-runtime"],
|
||||
include: ["dva/router", "dva/saga", "dva/fetch"]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# Antd Admin
|
||||
|
||||
[](https://github.com/facebook/react)
|
||||
[](https://github.com/ant-design/ant-design)
|
||||
[](https://github.com/facebook/react)
|
||||
[](https://github.com/ant-design/ant-design)
|
||||
[](https://github.com/dvajs/dva)
|
||||
|
||||
[](https://github.com/zuiidea/antd-admin)
|
||||
@@ -21,6 +21,21 @@
|
||||
|
||||
## 更新日志
|
||||
|
||||
### 4.3.0
|
||||
|
||||
`2017-07-30`
|
||||
|
||||
- 更新[roadhog](https://github.com/sorrycc/roadhog)至`1.0.0-beta.7`,得益于`webpack@3.4`,编译速度不减。
|
||||
- 基于使用roadhog的dll插件,开发时编译耗时减半。
|
||||
- 新增打包时按项目版本号生成文件目录。[#449](https://github.com/zuiidea/antd-admin/issues/449)
|
||||
- 更新`eslint`,并适当修改了`.eslintrc`。
|
||||
|
||||
### 4.2.3
|
||||
|
||||
`2017-07-07`
|
||||
|
||||
- 新增用户按权限访问。[#384](https://github.com/zuiidea/antd-admin/issues/384)
|
||||
|
||||
### 4.2.2
|
||||
|
||||
`2017-06-01`
|
||||
@@ -51,6 +66,7 @@
|
||||
```bash
|
||||
├── /dist/ # 项目输出目录
|
||||
├── /src/ # 项目源码目录
|
||||
│ ├── /public/ # 公共文件,编译时copy至dist目录
|
||||
│ ├── /components/ # UI组件及UI相关方法
|
||||
│ │ ├── skin.less # 全局样式
|
||||
│ │ └── vars.less # 全局样式变量
|
||||
@@ -92,6 +108,7 @@
|
||||
开发:
|
||||
|
||||
```bash
|
||||
npm run build:dll #第一次npm run dev时需运行此命令,使开发时编译更快
|
||||
npm run dev
|
||||
打开 http://localhost:8000
|
||||
```
|
||||
@@ -110,7 +127,13 @@ npm run build
|
||||
npm run lint
|
||||
```
|
||||
|
||||
项目部署 [#269](https://github.com/zuiidea/antd-admin/issues/269)
|
||||
## FAQ
|
||||
|
||||
- 项目打包后如何部署? [#269](https://github.com/zuiidea/antd-admin/issues/269)
|
||||
- 如何做权限管理? [#384](https://github.com/zuiidea/antd-admin/issues/384)
|
||||
- 如何使用mock.js模拟接口,怎么使用线上接口? [#348](https://github.com/zuiidea/antd-admin/issues/348)
|
||||
- 如何使用Iconfont,如何使用本地的svg图标? [#270](https://github.com/zuiidea/antd-admin/issues/270)
|
||||
- 怎么按版本打包,上线时不影响正在访问的用户? [#449](https://github.com/zuiidea/antd-admin/issues/449)
|
||||
|
||||
## 参考
|
||||
|
||||
|
||||
+35
-23
@@ -1,43 +1,54 @@
|
||||
{
|
||||
"private": true,
|
||||
"name": "antd-admin",
|
||||
"version": "4.3.0",
|
||||
"dependencies": {
|
||||
"antd": "^2.10.0",
|
||||
"antd": "^2.11.2",
|
||||
"axios": "^0.16.2",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"classnames": "^2.2.5",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"d3-shape": "^1.2.0",
|
||||
"draftjs-to-markdown": "^0.4.0",
|
||||
"dva": "^1.2.0",
|
||||
"dva-loading": "^0.2.0",
|
||||
"ejs-loader": "^0.3.0",
|
||||
"jsonp": "^0.2.1",
|
||||
"less-vars-to-js": "^1.1.2",
|
||||
"lodash": "^4.17.4",
|
||||
"mockjs": "^1.0.1-beta3",
|
||||
"nprogress": "^0.2.0",
|
||||
"qs": "^6.2.0",
|
||||
"react": "^15.4.4",
|
||||
"react-countup": "1.3.0",
|
||||
"react-dom": "^15.4.1",
|
||||
"react-draft-wysiwyg": "^1.8.1",
|
||||
"react-helmet": "^5.0.0",
|
||||
"recharts": "^0.19.0"
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.5.10",
|
||||
"qs": "^6.5.0",
|
||||
"rc-tween-one": "^1.3.1",
|
||||
"react": "^15.6.1",
|
||||
"react-countup": "^2.1.1",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-draft-wysiwyg": "^1.10.0",
|
||||
"react-helmet": "^5.1.3",
|
||||
"recharts": "^0.22.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"axios": "^0.15.3",
|
||||
"babel-eslint": "^6.1.2",
|
||||
"babel-eslint": "^7.2.3",
|
||||
"babel-plugin-dev-expression": "^0.2.1",
|
||||
"babel-plugin-dva-hmr": "^0.3.2",
|
||||
"babel-plugin-import": "^1.1.1",
|
||||
"babel-plugin-transform-runtime": "^6.9.0",
|
||||
"babel-polyfill": "^6.23.0",
|
||||
"babel-runtime": "^6.9.2",
|
||||
"draftjs-to-html": "^0.7.0",
|
||||
"eslint": "^3.17.1",
|
||||
"eslint-config-airbnb": "^9.0.1",
|
||||
"eslint-plugin-import": "^1.16.0",
|
||||
"eslint-plugin-jsx-a11y": "^1.4.2",
|
||||
"eslint-plugin-react": "^5.1.1",
|
||||
"jsonp": "^0.2.1",
|
||||
"less-vars-to-js": "^1.1.2",
|
||||
"mockjs": "^1.0.1-beta3",
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"rc-tween-one": "^1.0.0",
|
||||
"dva-model-extend": "^0.1.1",
|
||||
"eslint": "^4.1.1",
|
||||
"eslint-config-airbnb": "^15.0.2",
|
||||
"eslint-import-resolver-node": "^0.3.1",
|
||||
"eslint-loader": "^1.9.0",
|
||||
"eslint-plugin-import": "^2.6.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.0.2",
|
||||
"eslint-plugin-react": "^7.1.0",
|
||||
"html-webpack-plugin": "^2.29.0",
|
||||
"html-webpack-template": "^5.6.0",
|
||||
"redbox-react": "^1.2.10",
|
||||
"roadhog": "0.6.0-beta.6"
|
||||
"roadhog": "1.0.0-beta.7"
|
||||
},
|
||||
"pre-commit": [
|
||||
"lint"
|
||||
@@ -45,6 +56,7 @@
|
||||
"scripts": {
|
||||
"dev": "set BROWSER=none&&set HOST=0.0.0.0&&roadhog server",
|
||||
"lint": "eslint --fix --ext .js src",
|
||||
"build": "roadhog build"
|
||||
"build": "roadhog build",
|
||||
"build:dll": "roadhog buildDll"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table } from 'antd'
|
||||
import { request } from '../../utils'
|
||||
import { request } from 'utils'
|
||||
import lodash from 'lodash'
|
||||
import './DataTable.less'
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import { Editor } from 'react-draft-wysiwyg'
|
||||
import styles from './Editor.less'
|
||||
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
|
||||
import styles from './Editor.less'
|
||||
|
||||
|
||||
const DraftEditor = (props) => {
|
||||
|
||||
@@ -11,8 +11,8 @@ const FilterItem = ({
|
||||
<div className={styles.filterItem}>
|
||||
{labelArray.length > 0
|
||||
? <div className={styles.labelWrap}>
|
||||
{labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
|
||||
</div>
|
||||
{labelArray.map((item, index) => <span className="labelText" key={index}>{item}</span>)}
|
||||
</div>
|
||||
: ''}
|
||||
<div className={styles.item}>
|
||||
{children}
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
/* global location */
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Breadcrumb, Icon } from 'antd'
|
||||
import { Link } from 'dva/router'
|
||||
import styles from './Bread.less'
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
import { queryArray } from '../../utils'
|
||||
import { queryArray } from 'utils'
|
||||
import styles from './Bread.less'
|
||||
|
||||
const Bread = ({ menu }) => {
|
||||
// 匹配当前路由
|
||||
let pathArray = []
|
||||
let current
|
||||
for (let index in menu) {
|
||||
if (menu[index].router && pathToRegexp(menu[index].router).exec(location.pathname)) {
|
||||
if (menu[index].route && pathToRegexp(menu[index].route).exec(location.pathname)) {
|
||||
current = menu[index]
|
||||
break
|
||||
}
|
||||
@@ -25,7 +26,11 @@ const Bread = ({ menu }) => {
|
||||
}
|
||||
|
||||
if (!current) {
|
||||
pathArray.push(menu[0])
|
||||
pathArray.push(menu[0] || {
|
||||
id: 1,
|
||||
icon: 'laptop',
|
||||
name: 'Dashboard',
|
||||
})
|
||||
pathArray.push({
|
||||
id: 404,
|
||||
name: 'Not Found',
|
||||
@@ -38,14 +43,14 @@ const Bread = ({ menu }) => {
|
||||
const breads = pathArray.map((item, key) => {
|
||||
const content = (
|
||||
<span>{item.icon
|
||||
? <Icon type={item.icon} style={{ marginRight: 4 }} />
|
||||
: ''}{item.name}</span>
|
||||
? <Icon type={item.icon} style={{ marginRight: 4 }} />
|
||||
: ''}{item.name}</span>
|
||||
)
|
||||
return (
|
||||
<Breadcrumb.Item key={key}>
|
||||
{((pathArray.length - 1) !== key)
|
||||
? <Link to={item.router}>
|
||||
{content}
|
||||
? <Link to={item.route}>
|
||||
{content}
|
||||
</Link>
|
||||
: content}
|
||||
</Breadcrumb.Item>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import { config } from 'utils'
|
||||
import styles from './Footer.less'
|
||||
import { config } from '../../utils'
|
||||
|
||||
const Footer = () => <div className={styles.footer}>
|
||||
const Footer = () => (<div className={styles.footer}>
|
||||
{config.footerText}
|
||||
</div>
|
||||
</div>)
|
||||
|
||||
export default Footer
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Menu, Icon, Popover } from 'antd'
|
||||
import classnames from 'classnames'
|
||||
import styles from './Header.less'
|
||||
import Menus from './Menu'
|
||||
|
||||
@@ -26,18 +27,25 @@ const Header = ({ user, logout, switchSider, siderFold, isNavbar, menuPopoverVis
|
||||
<Icon type="bars" />
|
||||
</div>
|
||||
</Popover>
|
||||
: <div className={styles.button} onClick={switchSider}>
|
||||
<Icon type={siderFold ? 'menu-unfold' : 'menu-fold'} />
|
||||
: <div
|
||||
className={styles.button}
|
||||
onClick={switchSider}
|
||||
>
|
||||
<Icon type={classnames({ 'menu-unfold': siderFold, 'menu-fold': !siderFold })} />
|
||||
</div>}
|
||||
<div className={styles.rightWarpper}>
|
||||
<div className={styles.button}>
|
||||
<Icon type="mail" />
|
||||
</div>
|
||||
<Menu mode="horizontal" onClick={handleClickMenu}>
|
||||
<SubMenu style={{
|
||||
float: 'right',
|
||||
}} title={< span > <Icon type="user" />
|
||||
{user.username} < /span>}
|
||||
<SubMenu
|
||||
style={{
|
||||
float: 'right',
|
||||
}}
|
||||
title={<span>
|
||||
<Icon type="user" />
|
||||
{user.username}
|
||||
</span>}
|
||||
>
|
||||
<Menu.Item key="logout">
|
||||
Sign out
|
||||
|
||||
@@ -14,6 +14,7 @@
|
||||
justify-content: space-between;
|
||||
height: 47px;
|
||||
background-color: #fff;
|
||||
z-index: 999;
|
||||
|
||||
.rightWarpper {
|
||||
display: flex;
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
/* global location */
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Menu, Icon } from 'antd'
|
||||
import { Link } from 'dva/router'
|
||||
import { arrayToTree, queryArray } from '../../utils'
|
||||
import { arrayToTree, queryArray } from 'utils'
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
|
||||
const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
|
||||
const Menus = ({ siderFold, darkTheme, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => {
|
||||
// 生成树状
|
||||
const menuTree = arrayToTree(menu.filter(_ => _.mpid !== -1), 'id', 'mpid')
|
||||
const menuTree = arrayToTree(menu.filter(_ => _.mpid !== '-1'), 'id', 'mpid')
|
||||
const levelMap = {}
|
||||
|
||||
// 递归生成菜单
|
||||
const getMenus = (menuTreeN, siderFoldN) => {
|
||||
return menuTreeN.map(item => {
|
||||
return menuTreeN.map((item) => {
|
||||
if (item.children) {
|
||||
if (item.mpid) {
|
||||
levelMap[item.id] = item.mpid
|
||||
@@ -22,7 +23,7 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys
|
||||
key={item.id}
|
||||
title={<span>
|
||||
{item.icon && <Icon type={item.icon} />}
|
||||
{(!siderFoldN || menuTree.indexOf(item) < 0) && item.name}
|
||||
{(!siderFoldN || !menuTree.includes(item)) && item.name}
|
||||
</span>}
|
||||
>
|
||||
{getMenus(item.children, siderFoldN)}
|
||||
@@ -31,9 +32,9 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys
|
||||
}
|
||||
return (
|
||||
<Menu.Item key={item.id}>
|
||||
<Link to={item.router}>
|
||||
<Link to={item.route}>
|
||||
{item.icon && <Icon type={item.icon} />}
|
||||
{(!siderFoldN || menuTree.indexOf(item) < 0) && item.name}
|
||||
{(!siderFoldN || !menuTree.includes(item)) && item.name}
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)
|
||||
@@ -60,8 +61,8 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys
|
||||
}
|
||||
|
||||
const onOpenChange = (openKeys) => {
|
||||
const latestOpenKey = openKeys.find(key => !(navOpenKeys.indexOf(key) > -1))
|
||||
const latestCloseKey = navOpenKeys.find(key => !(openKeys.indexOf(key) > -1))
|
||||
const latestOpenKey = openKeys.find(key => !navOpenKeys.includes(key))
|
||||
const latestCloseKey = navOpenKeys.find(key => !openKeys.includes(key))
|
||||
let nextOpenKeys = []
|
||||
if (latestOpenKey) {
|
||||
nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey)
|
||||
@@ -82,7 +83,7 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys
|
||||
let currentMenu
|
||||
let defaultSelectedKeys
|
||||
for (let item of menu) {
|
||||
if (item.router && pathToRegexp(item.router).exec(location.pathname)) {
|
||||
if (item.route && pathToRegexp(item.route).exec(location.pathname)) {
|
||||
currentMenu = item
|
||||
break
|
||||
}
|
||||
@@ -119,8 +120,6 @@ Menus.propTypes = {
|
||||
menu: PropTypes.array,
|
||||
siderFold: PropTypes.bool,
|
||||
darkTheme: PropTypes.bool,
|
||||
location: PropTypes.object,
|
||||
isNavbar: PropTypes.bool,
|
||||
handleClickNavMenu: PropTypes.func,
|
||||
navOpenKeys: PropTypes.array,
|
||||
changeOpenKeys: PropTypes.func,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Icon, Switch } from 'antd'
|
||||
import { config } from 'utils'
|
||||
import styles from './Layout.less'
|
||||
import { config } from '../../utils'
|
||||
import Menus from './Menu'
|
||||
|
||||
const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) => {
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classNames from 'classnames'
|
||||
import styles from './Loader.less'
|
||||
|
||||
const Loader = ({ spinning }) => {
|
||||
return (<div className={classNames(styles.loader, { [styles.hidden]: !spinning })}>
|
||||
<div className={styles.warpper}>
|
||||
<div className={styles.inner} />
|
||||
<div className={styles.text} >LOADING</div>
|
||||
</div>
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
Loader.propTypes = {
|
||||
spinning: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default Loader
|
||||
@@ -0,0 +1,64 @@
|
||||
.loader {
|
||||
display: block;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
|
||||
.warpper {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 auto;
|
||||
text-indent: -12345px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.7);
|
||||
border-radius: 50%;
|
||||
z-index: 100001;
|
||||
|
||||
:local {
|
||||
animation: spinner 600ms infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
letter-spacing: 4px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&.hidden {
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 1s ease 0.5s, z-index 0.1s ease 1.5s;
|
||||
}
|
||||
}
|
||||
@keyframes spinner {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "Loader",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Loader.js"
|
||||
}
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import ReactDOM from 'react-dom'
|
||||
import styles from './Search.less'
|
||||
import { Input, Select, Button, Icon } from 'antd'
|
||||
import styles from './Search.less'
|
||||
|
||||
class Search extends React.Component {
|
||||
state = {
|
||||
@@ -18,13 +18,13 @@ class Search extends React.Component {
|
||||
}
|
||||
if (this.props.onSearch) this.props.onSearch(data)
|
||||
}
|
||||
handleInputChange = e => {
|
||||
handleInputChange = (e) => {
|
||||
this.setState({
|
||||
...this.state,
|
||||
clearVisible: e.target.value !== '',
|
||||
})
|
||||
}
|
||||
handleSelectChange = value => {
|
||||
handleSelectChange = (value) => {
|
||||
this.setState({
|
||||
...this.state,
|
||||
selectValue: value,
|
||||
|
||||
@@ -4,6 +4,7 @@ import Iconfont from './Iconfont'
|
||||
import Search from './Search'
|
||||
import Editor from './Editor'
|
||||
import FilterItem from './FilterItem'
|
||||
import Loader from './Loader'
|
||||
import * as Layout from './Layout/index.js'
|
||||
|
||||
import layer from './layer'
|
||||
@@ -16,5 +17,6 @@ export {
|
||||
Search,
|
||||
Editor,
|
||||
FilterItem,
|
||||
Loader,
|
||||
layer,
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
/* global document */
|
||||
import { Modal, message } from 'antd'
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom'
|
||||
import classnames from 'classnames'
|
||||
import styles from './layer.less'
|
||||
|
||||
const { info, success, error, warning, confirm } = Modal
|
||||
|
||||
const layer = {
|
||||
@@ -15,7 +17,7 @@ const layer = {
|
||||
confirm,
|
||||
}
|
||||
|
||||
layer.close = (index) => new Promise((resolve, reject) => {
|
||||
layer.close = index => new Promise((resolve, reject) => {
|
||||
const { prefixCls } = layer
|
||||
let div = document.getElementById(`${prefixCls}-reference-${index}`)
|
||||
if (index === undefined) {
|
||||
@@ -41,7 +43,7 @@ layer.closeAll = () => {
|
||||
let i = 0
|
||||
while (i < references.length) {
|
||||
layer.close()
|
||||
i++
|
||||
i += 1
|
||||
}
|
||||
}
|
||||
|
||||
@@ -50,7 +52,8 @@ layer.open = (config) => {
|
||||
const { content, ...modalProps } = props
|
||||
const { className, wrapClassName = '', verticalCenter = true } = modalProps
|
||||
const { prefixCls } = layer
|
||||
const index = layer.index++
|
||||
layer.index += 1
|
||||
const index = layer.index
|
||||
let div = document.createElement('div')
|
||||
div.id = `${prefixCls}-reference-${index}`
|
||||
div.className = `${prefixCls}-reference`
|
||||
|
||||
@@ -26,6 +26,7 @@
|
||||
}
|
||||
})()
|
||||
</script>
|
||||
<script src="roadhog.dll.js"></script>
|
||||
<script src="/index.js"></script>
|
||||
</body>
|
||||
|
||||
|
||||
+3
-3
@@ -1,9 +1,9 @@
|
||||
import './index.html'
|
||||
import 'babel-polyfill'
|
||||
import { message } from 'antd'
|
||||
import dva from 'dva'
|
||||
import createLoading from 'dva-loading'
|
||||
import { browserHistory } from 'dva/router'
|
||||
import { message } from 'antd'
|
||||
import 'babel-polyfill'
|
||||
import './index.html'
|
||||
|
||||
// 1. Initialize
|
||||
const app = dva({
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
const Mock = require('mockjs')
|
||||
const config = require('../utils/config')
|
||||
|
||||
const queryArray = (array, key, keyAlias = 'key') => {
|
||||
if (!(array instanceof Array)) {
|
||||
return null
|
||||
}
|
||||
let data
|
||||
|
||||
for (const item of array) {
|
||||
if (item[keyAlias] === key) {
|
||||
data = item
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
if (data) {
|
||||
return data
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const NOTFOUND = {
|
||||
message: 'Not Found',
|
||||
documentation_url: 'http://localhost:8000/request',
|
||||
}
|
||||
|
||||
|
||||
let postId = 0
|
||||
const posts = Mock.mock({
|
||||
'data|100': [
|
||||
{
|
||||
id () {
|
||||
postId += 1
|
||||
return postId + 10000
|
||||
},
|
||||
'status|1-2': 1,
|
||||
title: '@title',
|
||||
author: '@last',
|
||||
categories: '@word',
|
||||
tags: '@word',
|
||||
'views|10-200': 1,
|
||||
'comments|10-200': 1,
|
||||
visibility: () => {
|
||||
return Mock.mock('@pick(["Public",'
|
||||
+ '"Password protected", '
|
||||
+ '"Private"])')
|
||||
},
|
||||
date: '@dateTime',
|
||||
image () {
|
||||
return Mock.Random.image('100x100', Mock.Random.color(), '#757575', 'png', this.author.substr(0, 1))
|
||||
},
|
||||
},
|
||||
],
|
||||
}).data
|
||||
|
||||
module.exports = {
|
||||
queryArray,
|
||||
NOTFOUND,
|
||||
Mock,
|
||||
posts,
|
||||
config,
|
||||
}
|
||||
@@ -1,6 +1,8 @@
|
||||
import { color } from '../utils/theme'
|
||||
|
||||
const Mock = require('mockjs')
|
||||
const config = require('../utils/config')
|
||||
|
||||
const { apiPrefix } = config
|
||||
|
||||
const Dashboard = Mock.mock({
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
const { config } = require('./common')
|
||||
|
||||
const { apiPrefix } = config
|
||||
let database = [
|
||||
{
|
||||
id: '1',
|
||||
icon: 'laptop',
|
||||
name: 'Dashboard',
|
||||
route: '/dashboard',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
bpid: '1',
|
||||
name: 'Users',
|
||||
icon: 'user',
|
||||
route: '/user',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
bpid: '1',
|
||||
name: 'Posts',
|
||||
icon: 'shopping-cart',
|
||||
route: '/post',
|
||||
},
|
||||
{
|
||||
id: '21',
|
||||
mpid: '-1',
|
||||
bpid: '2',
|
||||
name: 'User Detail',
|
||||
route: '/user/:id',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
bpid: '1',
|
||||
name: 'Request',
|
||||
icon: 'api',
|
||||
route: '/request',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
bpid: '1',
|
||||
name: 'UI Element',
|
||||
icon: 'camera-o',
|
||||
},
|
||||
{
|
||||
id: '41',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'IconFont',
|
||||
icon: 'heart-o',
|
||||
route: '/UIElement/iconfont',
|
||||
},
|
||||
{
|
||||
id: '42',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'DataTable',
|
||||
icon: 'database',
|
||||
route: '/UIElement/dataTable',
|
||||
},
|
||||
{
|
||||
id: '43',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'DropOption',
|
||||
icon: 'bars',
|
||||
route: '/UIElement/dropOption',
|
||||
},
|
||||
{
|
||||
id: '44',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'Search',
|
||||
icon: 'search',
|
||||
route: '/UIElement/search',
|
||||
},
|
||||
{
|
||||
id: '45',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'Editor',
|
||||
icon: 'edit',
|
||||
route: '/UIElement/editor',
|
||||
},
|
||||
{
|
||||
id: '46',
|
||||
bpid: '4',
|
||||
mpid: '4',
|
||||
name: 'layer (Function)',
|
||||
icon: 'credit-card',
|
||||
route: '/UIElement/layer',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
bpid: '1',
|
||||
name: 'Recharts',
|
||||
icon: 'code-o',
|
||||
},
|
||||
{
|
||||
id: '51',
|
||||
bpid: '5',
|
||||
mpid: '5',
|
||||
name: 'LineChart',
|
||||
icon: 'line-chart',
|
||||
route: '/chart/lineChart',
|
||||
},
|
||||
{
|
||||
id: '52',
|
||||
bpid: '5',
|
||||
mpid: '5',
|
||||
name: 'BarChart',
|
||||
icon: 'bar-chart',
|
||||
route: '/chart/barChart',
|
||||
},
|
||||
{
|
||||
id: '53',
|
||||
bpid: '5',
|
||||
mpid: '5',
|
||||
name: 'AreaChart',
|
||||
icon: 'area-chart',
|
||||
route: '/chart/areaChart',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
bpid: '1',
|
||||
name: 'Test Navigation',
|
||||
icon: 'setting',
|
||||
},
|
||||
{
|
||||
id: '61',
|
||||
bpid: '6',
|
||||
mpid: '6',
|
||||
name: 'Test Navigation1',
|
||||
route: '/navigation/navigation1',
|
||||
},
|
||||
{
|
||||
id: '62',
|
||||
bpid: '6',
|
||||
mpid: '6',
|
||||
name: 'Test Navigation2',
|
||||
route: '/navigation/navigation2',
|
||||
},
|
||||
{
|
||||
id: '621',
|
||||
bpid: '62',
|
||||
mpid: '62',
|
||||
name: 'Test Navigation21',
|
||||
route: '/navigation/navigation2/navigation1',
|
||||
},
|
||||
{
|
||||
id: '622',
|
||||
bpid: '62',
|
||||
mpid: '62',
|
||||
name: 'Test Navigation22',
|
||||
route: '/navigation/navigation2/navigation2',
|
||||
},
|
||||
]
|
||||
|
||||
module.exports = {
|
||||
|
||||
[`GET ${apiPrefix}/menus`] (req, res) {
|
||||
res.status(200).json(database)
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
const { config, posts } = require('./common')
|
||||
|
||||
const { apiPrefix } = config
|
||||
let database = posts
|
||||
|
||||
module.exports = {
|
||||
|
||||
[`GET ${apiPrefix}/posts`] (req, res) {
|
||||
const { query } = req
|
||||
let { pageSize, page, ...other } = query
|
||||
pageSize = pageSize || 10
|
||||
page = page || 1
|
||||
|
||||
let newData = database
|
||||
for (let key in other) {
|
||||
if ({}.hasOwnProperty.call(other, key)) {
|
||||
newData = newData.filter((item) => {
|
||||
if ({}.hasOwnProperty.call(item, key)) {
|
||||
return String(item[key]).trim().indexOf(decodeURI(other[key]).trim()) > -1
|
||||
}
|
||||
return true
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
res.status(200).json({
|
||||
data: newData.slice((page - 1) * pageSize, page * pageSize),
|
||||
total: newData.length,
|
||||
})
|
||||
},
|
||||
}
|
||||
+20
-10
@@ -1,6 +1,7 @@
|
||||
const qs = require('qs')
|
||||
const Mock = require('mockjs')
|
||||
const config = require('../utils/config')
|
||||
|
||||
const { apiPrefix } = config
|
||||
|
||||
let usersListData = Mock.mock({
|
||||
@@ -25,14 +26,23 @@ let usersListData = Mock.mock({
|
||||
|
||||
let database = usersListData.data
|
||||
|
||||
const EnumRoleType = {
|
||||
ADMIN: 'admin',
|
||||
DEFAULT: 'guest',
|
||||
DEVELOPER: 'developer',
|
||||
}
|
||||
|
||||
const userPermission = {
|
||||
DEFAULT: [
|
||||
'dashboard', 'chart',
|
||||
],
|
||||
ADMIN: [
|
||||
'dashboard', 'users', 'UIElement', 'UIElementIconfont', 'chart',
|
||||
],
|
||||
DEVELOPER: ['dashboard', 'users', 'UIElement', 'UIElementIconfont', 'chart'],
|
||||
DEFAULT: {
|
||||
visit: ['1', '2', '21', '7', '5', '51', '52', '53'],
|
||||
role: EnumRoleType.DEFAULT,
|
||||
},
|
||||
ADMIN: {
|
||||
role: EnumRoleType.ADMIN,
|
||||
},
|
||||
DEVELOPER: {
|
||||
role: EnumRoleType.DEVELOPER,
|
||||
},
|
||||
}
|
||||
|
||||
const adminUsers = [
|
||||
@@ -82,7 +92,7 @@ module.exports = {
|
||||
|
||||
[`POST ${apiPrefix}/user/login`] (req, res) {
|
||||
const { username, password } = req.body
|
||||
const user = adminUsers.filter((item) => item.username === username)
|
||||
const user = adminUsers.filter(item => item.username === username)
|
||||
|
||||
if (user.length > 0 && user[0].password === password) {
|
||||
const now = new Date()
|
||||
@@ -165,7 +175,7 @@ module.exports = {
|
||||
|
||||
[`DELETE ${apiPrefix}/users`] (req, res) {
|
||||
const { ids } = req.body
|
||||
database = database.filter((item) => !ids.some(_ => _ === item.id))
|
||||
database = database.filter(item => !ids.some(_ => _ === item.id))
|
||||
res.status(204).end()
|
||||
},
|
||||
|
||||
@@ -195,7 +205,7 @@ module.exports = {
|
||||
const { id } = req.params
|
||||
const data = queryArray(database, id, 'id')
|
||||
if (data) {
|
||||
database = database.filter((item) => item.id !== id)
|
||||
database = database.filter(item => item.id !== id)
|
||||
res.status(204).end()
|
||||
} else {
|
||||
res.status(404).json(NOTFOUND)
|
||||
|
||||
+56
-27
@@ -1,18 +1,35 @@
|
||||
import { query, logout } from '../services/app'
|
||||
/* global window */
|
||||
/* global document */
|
||||
/* global location */
|
||||
import { routerRedux } from 'dva/router'
|
||||
import { parse } from 'qs'
|
||||
import { config } from '../utils'
|
||||
import config from 'config'
|
||||
import { EnumRoleType } from 'enums'
|
||||
import { query, logout } from '../services/app'
|
||||
import * as menusService from '../services/menus'
|
||||
|
||||
const { prefix } = config
|
||||
|
||||
export default {
|
||||
namespace: 'app',
|
||||
state: {
|
||||
user: {},
|
||||
permissions: {
|
||||
visit: [],
|
||||
},
|
||||
menu: [
|
||||
{
|
||||
id: 1,
|
||||
icon: 'laptop',
|
||||
name: 'Dashboard',
|
||||
router: '/dashboard',
|
||||
},
|
||||
],
|
||||
menuPopoverVisible: false,
|
||||
siderFold: localStorage.getItem(`${prefix}siderFold`) === 'true',
|
||||
darkTheme: localStorage.getItem(`${prefix}darkTheme`) === 'true',
|
||||
siderFold: window.localStorage.getItem(`${prefix}siderFold`) === 'true',
|
||||
darkTheme: window.localStorage.getItem(`${prefix}darkTheme`) === 'true',
|
||||
isNavbar: document.body.clientWidth < 769,
|
||||
navOpenKeys: JSON.parse(localStorage.getItem(`${prefix}navOpenKeys`)) || [],
|
||||
navOpenKeys: JSON.parse(window.localStorage.getItem(`${prefix}navOpenKeys`)) || [],
|
||||
},
|
||||
subscriptions: {
|
||||
|
||||
@@ -30,30 +47,44 @@ export default {
|
||||
},
|
||||
effects: {
|
||||
|
||||
*query ({
|
||||
* query ({
|
||||
payload,
|
||||
}, { call, put }) {
|
||||
const data = yield call(query, parse(payload))
|
||||
if (data.success && data.user) {
|
||||
const { success, user } = yield call(query, payload)
|
||||
if (success && user) {
|
||||
const { list } = yield call(menusService.query)
|
||||
const { permissions } = user
|
||||
let menu = list
|
||||
if (permissions.role === EnumRoleType.ADMIN || permissions.role === EnumRoleType.DEVELOPER) {
|
||||
permissions.visit = list.map(item => item.id)
|
||||
} else {
|
||||
menu = list.filter((item) => {
|
||||
const cases = [
|
||||
permissions.visit.includes(item.id),
|
||||
item.mpid ? permissions.visit.includes(item.mpid) || item.mpid === '-1' : true,
|
||||
item.bpid ? permissions.visit.includes(item.bpid) : true,
|
||||
]
|
||||
return cases.every(_ => _)
|
||||
})
|
||||
}
|
||||
yield put({
|
||||
type: 'querySuccess',
|
||||
payload: data.user,
|
||||
type: 'updateState',
|
||||
payload: {
|
||||
user,
|
||||
permissions,
|
||||
menu,
|
||||
},
|
||||
})
|
||||
if (location.pathname === '/login') {
|
||||
yield put(routerRedux.push('/dashboard'))
|
||||
}
|
||||
} else {
|
||||
if (location.pathname !== '/login') {
|
||||
let from = location.pathname
|
||||
if (location.pathname === '/dashboard') {
|
||||
from = '/dashboard'
|
||||
}
|
||||
window.location = `${location.origin}/login?from=${from}`
|
||||
}
|
||||
} else if (config.openPages && config.openPages.indexOf(location.pathname) < 0) {
|
||||
let from = location.pathname
|
||||
window.location = `${location.origin}/login?from=${from}`
|
||||
}
|
||||
},
|
||||
|
||||
*logout ({
|
||||
* logout ({
|
||||
payload,
|
||||
}, { call, put }) {
|
||||
const data = yield call(logout, parse(payload))
|
||||
@@ -64,10 +95,8 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
*changeNavbar ({
|
||||
payload,
|
||||
}, { put, select }) {
|
||||
const { app } = yield(select(_ => _))
|
||||
* changeNavbar (action, { put, select }) {
|
||||
const { app } = yield (select(_ => _))
|
||||
const isNavbar = document.body.clientWidth < 769
|
||||
if (isNavbar !== app.isNavbar) {
|
||||
yield put({ type: 'handleNavbar', payload: isNavbar })
|
||||
@@ -76,15 +105,15 @@ export default {
|
||||
|
||||
},
|
||||
reducers: {
|
||||
querySuccess (state, { payload: user }) {
|
||||
updateState (state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
user,
|
||||
...payload,
|
||||
}
|
||||
},
|
||||
|
||||
switchSider (state) {
|
||||
localStorage.setItem(`${prefix}siderFold`, !state.siderFold)
|
||||
window.localStorage.setItem(`${prefix}siderFold`, !state.siderFold)
|
||||
return {
|
||||
...state,
|
||||
siderFold: !state.siderFold,
|
||||
@@ -92,7 +121,7 @@ export default {
|
||||
},
|
||||
|
||||
switchTheme (state) {
|
||||
localStorage.setItem(`${prefix}darkTheme`, !state.darkTheme)
|
||||
window.localStorage.setItem(`${prefix}darkTheme`, !state.darkTheme)
|
||||
return {
|
||||
...state,
|
||||
darkTheme: !state.darkTheme,
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import modelExtend from 'dva-model-extend'
|
||||
|
||||
const model = {
|
||||
reducers: {
|
||||
updateState (state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
...payload,
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
const pageModel = modelExtend(model, {
|
||||
|
||||
state: {
|
||||
list: [],
|
||||
pagination: {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: total => `Total ${total} Items`,
|
||||
current: 1,
|
||||
total: 0,
|
||||
},
|
||||
},
|
||||
|
||||
reducers: {
|
||||
querySuccess (state, { payload }) {
|
||||
const { list, pagination } = payload
|
||||
return {
|
||||
...state,
|
||||
list,
|
||||
pagination: {
|
||||
...state.pagination,
|
||||
...pagination,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
|
||||
module.exports = {
|
||||
model,
|
||||
pageModel,
|
||||
}
|
||||
+10
-13
@@ -1,5 +1,5 @@
|
||||
import { myCity, queryWeather, query } from '../services/dashboard'
|
||||
import { parse } from 'qs'
|
||||
import { myCity, queryWeather, query } from '../services/dashboard'
|
||||
|
||||
// zuimei 摘自 http://www.zuimeitianqi.com/res/js/index.js
|
||||
let zuimei = {
|
||||
@@ -34,12 +34,10 @@ let zuimei = {
|
||||
num = `${num}_${flg}.png`
|
||||
}
|
||||
}
|
||||
} else if ((hour >= 18 && hour <= 23) || (hour >= 0 && hour <= 6)) {
|
||||
num = `${num}_${flg}_night.png`
|
||||
} else {
|
||||
if ((hour >= 18 && hour <= 23) || (hour >= 0 && hour <= 6)) {
|
||||
num = `${num}_${flg}_night.png`
|
||||
} else {
|
||||
num = `${num}_${flg}.png`
|
||||
}
|
||||
num = `${num}_${flg}.png`
|
||||
}
|
||||
|
||||
return num
|
||||
@@ -195,22 +193,21 @@ export default {
|
||||
},
|
||||
},
|
||||
effects: {
|
||||
*query ({
|
||||
* query ({
|
||||
payload,
|
||||
}, { call, put }) {
|
||||
const data = yield call(query, parse(payload))
|
||||
yield put({ type: 'queryWeather', payload: { ...data } })
|
||||
},
|
||||
*queryWeather ({
|
||||
payload,
|
||||
}, { call, put }) {
|
||||
* queryWeather (action, { call, put }) {
|
||||
const myCityResult = yield call(myCity, { flg: 0 })
|
||||
const result = yield call(queryWeather, { cityCode: myCityResult.selectCityCode })
|
||||
const weather = zuimei.parseActualData(result.data.actual)
|
||||
weather.city = myCityResult.selectCityName
|
||||
yield put({ type: 'queryWeatherSuccess', payload: {
|
||||
weather,
|
||||
} })
|
||||
yield put({ type: 'queryWeatherSuccess',
|
||||
payload: {
|
||||
weather,
|
||||
} })
|
||||
},
|
||||
},
|
||||
reducers: {
|
||||
|
||||
+3
-3
@@ -1,6 +1,6 @@
|
||||
import { login } from '../services/login'
|
||||
import { routerRedux } from 'dva/router'
|
||||
import { queryURL } from '../utils'
|
||||
import { queryURL } from 'utils'
|
||||
import { login } from '../services/login'
|
||||
|
||||
export default {
|
||||
namespace: 'login',
|
||||
@@ -9,7 +9,7 @@ export default {
|
||||
},
|
||||
|
||||
effects: {
|
||||
*login ({
|
||||
* login ({
|
||||
payload,
|
||||
}, { put, call }) {
|
||||
yield put({ type: 'showLoginLoading' })
|
||||
|
||||
@@ -0,0 +1,45 @@
|
||||
import modelExtend from 'dva-model-extend'
|
||||
import { query } from '../services/posts'
|
||||
import { pageModel } from './common'
|
||||
|
||||
export default modelExtend(pageModel, {
|
||||
|
||||
namespace: 'post',
|
||||
|
||||
subscriptions: {
|
||||
setup ({ dispatch, history }) {
|
||||
history.listen((location) => {
|
||||
if (location.pathname === '/post') {
|
||||
dispatch({ type: 'query',
|
||||
payload: {
|
||||
status: 2,
|
||||
...location.query,
|
||||
} })
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
|
||||
effects: {
|
||||
* query ({
|
||||
payload,
|
||||
}, { call, put }) {
|
||||
const data = yield call(query, payload)
|
||||
if (data.success) {
|
||||
yield put({
|
||||
type: 'querySuccess',
|
||||
payload: {
|
||||
list: data.data,
|
||||
pagination: {
|
||||
current: Number(payload.page) || 1,
|
||||
pageSize: Number(payload.pageSize) || 10,
|
||||
total: data.total,
|
||||
},
|
||||
},
|
||||
})
|
||||
} else {
|
||||
throw data
|
||||
}
|
||||
},
|
||||
},
|
||||
})
|
||||
+17
-41
@@ -1,32 +1,27 @@
|
||||
/* global window */
|
||||
import modelExtend from 'dva-model-extend'
|
||||
import { config } from 'utils'
|
||||
import { create, remove, update } from '../services/user'
|
||||
import * as usersService from '../services/users'
|
||||
import { parse } from 'qs'
|
||||
import { pageModel } from './common'
|
||||
|
||||
const { query } = usersService
|
||||
const { prefix } = config
|
||||
|
||||
export default {
|
||||
|
||||
export default modelExtend(pageModel, {
|
||||
namespace: 'user',
|
||||
|
||||
state: {
|
||||
list: [],
|
||||
currentItem: {},
|
||||
modalVisible: false,
|
||||
modalType: 'create',
|
||||
selectedRowKeys: [],
|
||||
isMotion: localStorage.getItem('antdAdminUserIsMotion') === 'true',
|
||||
pagination: {
|
||||
showSizeChanger: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: total => `共 ${total} 条`,
|
||||
current: 1,
|
||||
total: null,
|
||||
},
|
||||
isMotion: window.localStorage.getItem(`${prefix}userIsMotion`) === 'true',
|
||||
},
|
||||
|
||||
subscriptions: {
|
||||
setup ({ dispatch, history }) {
|
||||
history.listen(location => {
|
||||
history.listen((location) => {
|
||||
if (location.pathname === '/user') {
|
||||
dispatch({
|
||||
type: 'query',
|
||||
@@ -39,8 +34,7 @@ export default {
|
||||
|
||||
effects: {
|
||||
|
||||
*query ({ payload }, { call, put }) {
|
||||
payload = parse(location.search.substr(1))
|
||||
* query ({ payload = {} }, { call, put }) {
|
||||
const data = yield call(query, payload)
|
||||
if (data) {
|
||||
yield put({
|
||||
@@ -57,7 +51,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
*'delete' ({ payload }, { call, put, select }) {
|
||||
* delete ({ payload }, { call, put, select }) {
|
||||
const data = yield call(remove, { id: payload })
|
||||
const { selectedRowKeys } = yield select(_ => _.user)
|
||||
if (data.success) {
|
||||
@@ -68,7 +62,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
*'multiDelete' ({ payload }, { call, put }) {
|
||||
* multiDelete ({ payload }, { call, put }) {
|
||||
const data = yield call(usersService.remove, payload)
|
||||
if (data.success) {
|
||||
yield put({ type: 'updateState', payload: { selectedRowKeys: [] } })
|
||||
@@ -78,7 +72,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
*create ({ payload }, { call, put }) {
|
||||
* create ({ payload }, { call, put }) {
|
||||
const data = yield call(create, payload)
|
||||
if (data.success) {
|
||||
yield put({ type: 'hideModal' })
|
||||
@@ -88,7 +82,7 @@ export default {
|
||||
}
|
||||
},
|
||||
|
||||
*update ({ payload }, { select, call, put }) {
|
||||
* update ({ payload }, { select, call, put }) {
|
||||
const id = yield select(({ user }) => user.currentItem.id)
|
||||
const newUser = { ...payload, id }
|
||||
const data = yield call(update, newUser)
|
||||
@@ -104,25 +98,8 @@ export default {
|
||||
|
||||
reducers: {
|
||||
|
||||
querySuccess (state, action) {
|
||||
const { list, pagination } = action.payload
|
||||
return { ...state,
|
||||
list,
|
||||
pagination: {
|
||||
...state.pagination,
|
||||
...pagination,
|
||||
} }
|
||||
},
|
||||
|
||||
updateState (state, { payload }) {
|
||||
return {
|
||||
...state,
|
||||
...payload,
|
||||
}
|
||||
},
|
||||
|
||||
showModal (state, action) {
|
||||
return { ...state, ...action.payload, modalVisible: true }
|
||||
showModal (state, { payload }) {
|
||||
return { ...state, ...payload, modalVisible: true }
|
||||
},
|
||||
|
||||
hideModal (state) {
|
||||
@@ -130,10 +107,9 @@ export default {
|
||||
},
|
||||
|
||||
switchIsMotion (state) {
|
||||
localStorage.setItem('antdAdminUserIsMotion', !state.isMotion)
|
||||
window.localStorage.setItem(`${prefix}userIsMotion`, !state.isMotion)
|
||||
return { ...state, isMotion: !state.isMotion }
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* global location */
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
import { query } from '../../services/user'
|
||||
|
||||
@@ -21,7 +22,7 @@ export default {
|
||||
},
|
||||
|
||||
effects: {
|
||||
*query ({
|
||||
* query ({
|
||||
payload,
|
||||
}, { call, put }) {
|
||||
const data = yield call(query, payload)
|
||||
|
||||
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 140 KiB |
|
Before Width: | Height: | Size: 24 KiB After Width: | Height: | Size: 24 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
+24
-16
@@ -15,7 +15,7 @@ const Routers = function ({ history, app }) {
|
||||
path: '/',
|
||||
component: App,
|
||||
getIndexRoute (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
registerModel(app, require('./models/dashboard'))
|
||||
cb(null, { component: require('./routes/dashboard/') })
|
||||
}, 'dashboard')
|
||||
@@ -24,7 +24,7 @@ const Routers = function ({ history, app }) {
|
||||
{
|
||||
path: 'dashboard',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
registerModel(app, require('./models/dashboard'))
|
||||
cb(null, require('./routes/dashboard/'))
|
||||
}, 'dashboard')
|
||||
@@ -32,7 +32,7 @@ const Routers = function ({ history, app }) {
|
||||
}, {
|
||||
path: 'user',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
registerModel(app, require('./models/user'))
|
||||
cb(null, require('./routes/user/'))
|
||||
}, 'user')
|
||||
@@ -40,7 +40,7 @@ const Routers = function ({ history, app }) {
|
||||
}, {
|
||||
path: 'user/:id',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
registerModel(app, require('./models/user/detail'))
|
||||
cb(null, require('./routes/user/detail/'))
|
||||
}, 'user-detail')
|
||||
@@ -48,7 +48,7 @@ const Routers = function ({ history, app }) {
|
||||
}, {
|
||||
path: 'login',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
registerModel(app, require('./models/login'))
|
||||
cb(null, require('./routes/login/'))
|
||||
}, 'login')
|
||||
@@ -56,77 +56,85 @@ const Routers = function ({ history, app }) {
|
||||
}, {
|
||||
path: 'request',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/request/'))
|
||||
}, 'request')
|
||||
},
|
||||
}, {
|
||||
path: 'UIElement/iconfont',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/UIElement/iconfont/'))
|
||||
}, 'UIElement-iconfont')
|
||||
},
|
||||
}, {
|
||||
path: 'UIElement/search',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/UIElement/search/'))
|
||||
}, 'UIElement-search')
|
||||
},
|
||||
}, {
|
||||
path: 'UIElement/dropOption',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/UIElement/dropOption/'))
|
||||
}, 'UIElement-dropOption')
|
||||
},
|
||||
}, {
|
||||
path: 'UIElement/layer',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/UIElement/layer/'))
|
||||
}, 'UIElement-layer')
|
||||
},
|
||||
}, {
|
||||
path: 'UIElement/dataTable',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/UIElement/dataTable/'))
|
||||
}, 'UIElement-dataTable')
|
||||
},
|
||||
}, {
|
||||
path: 'UIElement/editor',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/UIElement/editor/'))
|
||||
}, 'UIElement-editor')
|
||||
},
|
||||
}, {
|
||||
path: 'chart/lineChart',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/chart/lineChart/'))
|
||||
}, 'chart-lineChart')
|
||||
},
|
||||
}, {
|
||||
path: 'chart/barChart',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/chart/barChart/'))
|
||||
}, 'chart-barChart')
|
||||
},
|
||||
}, {
|
||||
path: 'chart/areaChart',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/chart/areaChart/'))
|
||||
}, 'chart-areaChart')
|
||||
},
|
||||
}, {
|
||||
path: 'post',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], (require) => {
|
||||
registerModel(app, require('./models/post'))
|
||||
cb(null, require('./routes/post/'))
|
||||
}, 'post')
|
||||
},
|
||||
}, {
|
||||
path: '*',
|
||||
getComponent (nextState, cb) {
|
||||
require.ensure([], require => {
|
||||
require.ensure([], (require) => {
|
||||
cb(null, require('./routes/error/'))
|
||||
}, 'error')
|
||||
},
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { DataTable } from '../../../components'
|
||||
import { DataTable } from 'components'
|
||||
import { Table, Row, Col, Card, Select } from 'antd'
|
||||
|
||||
class DataTablePage extends React.Component {
|
||||
@@ -35,7 +35,7 @@ class DataTablePage extends React.Component {
|
||||
dataKey: 'results',
|
||||
},
|
||||
columns: [
|
||||
{ title: 'Name', dataIndex: 'name', render: (text) => `${text.first} ${text.last}` },
|
||||
{ title: 'Name', dataIndex: 'name', render: text => `${text.first} ${text.last}` },
|
||||
{ title: 'Phone', dataIndex: 'phone' },
|
||||
{ title: 'Gender', dataIndex: 'gender' },
|
||||
],
|
||||
@@ -53,7 +53,7 @@ class DataTablePage extends React.Component {
|
||||
dataKey: 'results',
|
||||
},
|
||||
columns: [
|
||||
{ title: 'Name', dataIndex: 'name', render: (text) => `${text.first} ${text.last}` },
|
||||
{ title: 'Name', dataIndex: 'name', render: text => `${text.first} ${text.last}` },
|
||||
{ title: 'Phone', dataIndex: 'phone' },
|
||||
{ title: 'Gender', dataIndex: 'gender' },
|
||||
],
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { DropOption } from '../../../components'
|
||||
import { DropOption } from 'components'
|
||||
import { Table, Row, Col, Card, message } from 'antd'
|
||||
|
||||
const DropOptionPage = () => <div className="content-inner">
|
||||
const DropOptionPage = () => (<div className="content-inner">
|
||||
<Row gutter={32}>
|
||||
<Col lg={8} md={12}>
|
||||
<Card title="默认">
|
||||
@@ -90,6 +90,6 @@ const DropOptionPage = () => <div className="content-inner">
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>)
|
||||
|
||||
export default DropOptionPage
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { Editor } from '../../../components'
|
||||
import { Editor } from 'components'
|
||||
import { convertToRaw } from 'draft-js'
|
||||
import { Row, Col, Card } from 'antd'
|
||||
import draftToHtml from 'draftjs-to-html'
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { Iconfont } from '../../../components'
|
||||
import { Iconfont } from 'components'
|
||||
import { Table, Row, Col, Icon } from 'antd'
|
||||
import styles from './index.less'
|
||||
import './emoji.js'
|
||||
import './emoji'
|
||||
|
||||
const colorfulIcons = ['boluo', 'baixiangguo', 'chengzi', 'boluomei', 'caomei', 'dayouzi', 'chelizi', 'fanqie', 'hamigua', 'ganlan',
|
||||
'juzi', 'heimei', 'huolongguo', 'hongmei', 'lizi', 'lanmei', 'mangguo', 'mihoutao', 'longyan', 'mugua', 'lizi1', 'ningmeng']
|
||||
@@ -24,35 +24,35 @@ const localRequireSVGIcons = [
|
||||
require('../../../svg/cute/think.svg'),
|
||||
]
|
||||
|
||||
const IcoPage = () => <div className="content-inner">
|
||||
const IcoPage = () => (<div className="content-inner">
|
||||
<Icon type="star-oo" />
|
||||
<h2 style={{ margin: '16px 0' }}>Colorful Icon</h2>
|
||||
<ul className={styles.list}>
|
||||
{colorfulIcons.map(item => <li key={item}>
|
||||
{colorfulIcons.map(item => (<li key={item}>
|
||||
<Iconfont className={styles.icon} colorful type={item} />
|
||||
<span className={styles.name}>{item}</span>
|
||||
</li>)}
|
||||
</li>))}
|
||||
</ul>
|
||||
<h2 style={{ margin: '16px 0' }}>Flat Icon</h2>
|
||||
<ul className={styles.list}>
|
||||
{flatIcons.map(item => <li key={item}>
|
||||
{flatIcons.map(item => (<li key={item}>
|
||||
<Iconfont className={styles.icon} type={item} />
|
||||
<span className={styles.name}>{item}</span>
|
||||
</li>)}
|
||||
</li>))}
|
||||
</ul>
|
||||
<h2 style={{ margin: '16px 0' }}>Local SVG</h2>
|
||||
<ul className={styles.list}>
|
||||
{localSVGIcons.map(item => <li key={item}>
|
||||
{localSVGIcons.map(item => (<li key={item}>
|
||||
<Iconfont className={styles.icon} colorful type={item} />
|
||||
<span className={styles.name}>{item}</span>
|
||||
</li>)}
|
||||
</li>))}
|
||||
</ul>
|
||||
<h2 style={{ margin: '16px 0' }}>Local Require SVG</h2>
|
||||
<ul className={styles.list}>
|
||||
{localRequireSVGIcons.map(item => <li key={item}>
|
||||
<Iconfont className={styles.icon} colorful type={item} />
|
||||
<span className={styles.name}>{item}</span>
|
||||
</li>)}
|
||||
{localRequireSVGIcons.map(item => (<li key={item.default.id}>
|
||||
<Iconfont className={styles.icon} colorful type={item.default.id} />
|
||||
<span className={styles.name}>{item.default.id}</span>
|
||||
</li>))}
|
||||
</ul>
|
||||
<h2 style={{ margin: '16px 0' }}>API</h2>
|
||||
<Row>
|
||||
@@ -100,17 +100,17 @@ const IcoPage = () => <div className="content-inner">
|
||||
<div style={{ margin: '16px 0', lineHeight: 2 }}>
|
||||
<p>
|
||||
<a href="http://www.iconfont.cn/user/detail?uid=116813">何阿酥</a> colorful fruit icon
|
||||
<a href="http://www.iconfont.cn/collections/detail?cid=4014" target="_blank"> http://www.iconfont.cn/collections/detail?cid=4014</a>
|
||||
<a href="http://www.iconfont.cn/collections/detail?cid=4014" target="_blank" rel="noopener noreferrer"> http://www.iconfont.cn/collections/detail?cid=4014</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://www.iconfont.cn/user/detail?uid=496384">ColinXu</a> colorful 'tsundere' emoji icon
|
||||
<a href="http://www.iconfont.cn/collections/detail?cid=4116" target="_blank"> http://www.iconfont.cn/collections/detail?cid=4116</a>
|
||||
<a href="http://www.iconfont.cn/user/detail?uid=496384">ColinXu</a> colorful 'tsundere' emoji icon
|
||||
<a href="http://www.iconfont.cn/collections/detail?cid=4116" target="_blank" rel="noopener noreferrer"> http://www.iconfont.cn/collections/detail?cid=4116</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="http://www.iconfont.cn/user/detail?uid=116813">咕噜小莫莫</a> colorful 'face cute' emoji icon
|
||||
<a href="http://www.iconfont.cn/collections/detail?cid=4268" target="_blank"> http://www.iconfont.cn/collections/detail?cid=4268</a>
|
||||
<a href="http://www.iconfont.cn/user/detail?uid=116813">咕噜小莫莫</a> colorful 'face cute' emoji icon
|
||||
<a href="http://www.iconfont.cn/collections/detail?cid=4268" target="_blank" rel="noopener noreferrer"> http://www.iconfont.cn/collections/detail?cid=4268</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
|
||||
export default IcoPage
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { layer } from '../../../components'
|
||||
import { layer } from 'components'
|
||||
import { Table, Row, Col, Button, Card } from 'antd'
|
||||
|
||||
let Enum = {
|
||||
@@ -26,7 +26,7 @@ const IcoPage = () => {
|
||||
<h2 style={{ margin: '16px 0' }}>API</h2>
|
||||
<div style={{ margin: '16px 0' }}>
|
||||
<h2 style={{ margin: '4px 0' }}>layer.open(config)</h2>
|
||||
config对象与<a href="https://ant.design/components/modal-cn/#API" target="_blank">Modal</a>的参数基本一致,config属性如下。
|
||||
config对象与<a href="https://ant.design/components/modal-cn/#API" target="_blank" rel="noopener noreferrer">Modal</a>的参数基本一致,config属性如下。
|
||||
注意:1.visible属性一般不需要设置;2.afterClose无效,layer.close()可代替;3.layer.open()返回一个唯一的layer Id
|
||||
</div>
|
||||
<Row>
|
||||
@@ -69,7 +69,7 @@ const IcoPage = () => {
|
||||
},
|
||||
{
|
||||
props: 'confirmLoading',
|
||||
desciption: '确定按钮 loading ',
|
||||
desciption: '确定按钮 loading',
|
||||
type: 'boolean',
|
||||
default: '无',
|
||||
},
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import { Search } from '../../../components'
|
||||
import { Search } from 'components'
|
||||
import { Table, Row, Col, Card } from 'antd'
|
||||
|
||||
const SearchPage = () => <div className="content-inner">
|
||||
const SearchPage = () => (<div className="content-inner">
|
||||
<Row gutter={32}>
|
||||
<Col lg={8} md={12}>
|
||||
<Card title="默认">
|
||||
@@ -93,6 +93,6 @@ const SearchPage = () => <div className="content-inner">
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</div>)
|
||||
|
||||
export default SearchPage
|
||||
|
||||
+24
-18
@@ -1,19 +1,28 @@
|
||||
/* global window */
|
||||
import React from 'react'
|
||||
import NProgress from 'nprogress'
|
||||
import PropTypes from 'prop-types'
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
import { connect } from 'dva'
|
||||
import { Layout } from '../components'
|
||||
import { classnames, config, menu } from '../utils'
|
||||
import { Layout, Loader } from 'components'
|
||||
import { classnames, config } from 'utils'
|
||||
import { Helmet } from 'react-helmet'
|
||||
import '../themes/index.less'
|
||||
import './app.less'
|
||||
import NProgress from 'nprogress'
|
||||
const { prefix } = config
|
||||
import Error from './error'
|
||||
|
||||
const { prefix, openPages } = config
|
||||
|
||||
const { Header, Bread, Footer, Sider, styles } = Layout
|
||||
let lastHref
|
||||
|
||||
const App = ({ children, location, dispatch, app, loading }) => {
|
||||
const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys } = app
|
||||
const App = ({ children, dispatch, app, loading, location }) => {
|
||||
const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys, menu, permissions } = app
|
||||
let { pathname } = location
|
||||
pathname = pathname.startsWith('/') ? pathname : `/${pathname}`
|
||||
const { iconFontJS, iconFontCSS, logo } = config
|
||||
const current = menu.filter(item => pathToRegexp(item.route || '').exec(pathname))
|
||||
const hasPermission = current.length ? permissions.visit.includes(current[0].id) : false
|
||||
const href = window.location.href
|
||||
|
||||
if (lastHref !== href) {
|
||||
@@ -28,7 +37,6 @@ const App = ({ children, location, dispatch, app, loading }) => {
|
||||
menu,
|
||||
user,
|
||||
siderFold,
|
||||
location,
|
||||
isNavbar,
|
||||
menuPopoverVisible,
|
||||
navOpenKeys,
|
||||
@@ -50,13 +58,12 @@ const App = ({ children, location, dispatch, app, loading }) => {
|
||||
menu,
|
||||
siderFold,
|
||||
darkTheme,
|
||||
location,
|
||||
navOpenKeys,
|
||||
changeTheme () {
|
||||
dispatch({ type: 'app/switchTheme' })
|
||||
},
|
||||
changeOpenKeys (openKeys) {
|
||||
localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
|
||||
window.localStorage.setItem(`${prefix}navOpenKeys`, JSON.stringify(openKeys))
|
||||
dispatch({ type: 'app/handleNavOpenKeys', payload: { navOpenKeys: openKeys } })
|
||||
},
|
||||
}
|
||||
@@ -64,20 +71,19 @@ const App = ({ children, location, dispatch, app, loading }) => {
|
||||
const breadProps = {
|
||||
menu,
|
||||
}
|
||||
|
||||
if (config.openPages && config.openPages.indexOf(location.pathname) > -1) {
|
||||
return <div>{children}</div>
|
||||
if (openPages && openPages.includes(pathname)) {
|
||||
return (<div>
|
||||
<Loader spinning={loading.effects['app/query']} />
|
||||
{children}
|
||||
</div>)
|
||||
}
|
||||
|
||||
const { iconFontJS, iconFontCSS, logo } = config
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Helmet>
|
||||
<title>ANTD ADMIN</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href={logo} type="image/x-icon" />
|
||||
{iconFontJS && <script src={iconFontJS}></script>}
|
||||
{iconFontJS && <script src={iconFontJS} />}
|
||||
{iconFontCSS && <link rel="stylesheet" href={iconFontCSS} />}
|
||||
</Helmet>
|
||||
<div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
|
||||
@@ -86,10 +92,10 @@ const App = ({ children, location, dispatch, app, loading }) => {
|
||||
</aside> : ''}
|
||||
<div className={styles.main}>
|
||||
<Header {...headerProps} />
|
||||
<Bread {...breadProps} location={location} />
|
||||
<Bread {...breadProps} />
|
||||
<div className={styles.container}>
|
||||
<div className={styles.content}>
|
||||
{children}
|
||||
{hasPermission ? children : <Error />}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './Container.less'
|
||||
import { ResponsiveContainer } from 'recharts'
|
||||
import styles from './Container.less'
|
||||
|
||||
const Container = ({ children, ratio = 5 / 2, minHeight = 250, maxHeight = 350 }) => <div className={styles.container} style={{ minHeight, maxHeight }}>
|
||||
<div style={{ marginTop: `${100 / ratio}%` || '100%' }}></div>
|
||||
const Container = ({ children, ratio = 5 / 2, minHeight = 250, maxHeight = 350 }) => (<div className={styles.container} style={{ minHeight, maxHeight }}>
|
||||
<div style={{ marginTop: `${100 / ratio}%` || '100%' }} />
|
||||
<div className={styles.content} style={{ minHeight, maxHeight }}>
|
||||
<ResponsiveContainer>
|
||||
{children}
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
|
||||
Container.propTypes = {
|
||||
children: PropTypes.element.isRequired,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import { Row, Col, Card, Button } from 'antd'
|
||||
import Container from '../Container'
|
||||
import * as d3 from 'd3-shape'
|
||||
import { Row, Col, Card, Button } from 'antd'
|
||||
import {
|
||||
AreaChart,
|
||||
Area,
|
||||
@@ -10,6 +9,7 @@ import {
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
} from 'recharts'
|
||||
import Container from '../Container'
|
||||
|
||||
const data = [
|
||||
{
|
||||
@@ -135,12 +135,14 @@ const colProps = {
|
||||
|
||||
const SimpleAreaChart = () => (
|
||||
<Container>
|
||||
<AreaChart data={data} margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}>
|
||||
<AreaChart data={data}
|
||||
margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -152,12 +154,14 @@ const SimpleAreaChart = () => (
|
||||
|
||||
const StackedAreaChart = () => (
|
||||
<Container>
|
||||
<AreaChart data={mixData} margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}>
|
||||
<AreaChart data={mixData}
|
||||
margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -192,9 +196,11 @@ const renderTooltipContent = (o) => {
|
||||
<p className="total">{`${label} (Total: ${total})`}</p>
|
||||
<ul className="list">
|
||||
{payload.map((entry, index) => (
|
||||
<li key={`item-${index}`} style={{
|
||||
color: entry.color,
|
||||
}}>
|
||||
<li key={`item-${index}`}
|
||||
style={{
|
||||
color: entry.color,
|
||||
}}
|
||||
>
|
||||
{`${entry.name}: ${entry.value}(${getPercent(entry.value, total)})`}
|
||||
</li>
|
||||
))}
|
||||
@@ -205,12 +211,15 @@ const renderTooltipContent = (o) => {
|
||||
|
||||
const PercentAreaChart = () => (
|
||||
<Container>
|
||||
<AreaChart data={percentData} stackOffset="expand" margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}>
|
||||
<AreaChart data={percentData}
|
||||
stackOffset="expand"
|
||||
margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="month" />
|
||||
<YAxis tickFormatter={toPercent} />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -226,12 +235,14 @@ const PercentAreaChart = () => (
|
||||
const cardinal = d3.curveCardinal.tension(0.2)
|
||||
const CardinalAreaChart = () => (
|
||||
<Container>
|
||||
<AreaChart data={mixData} margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}>
|
||||
<AreaChart data={mixData}
|
||||
margin={{
|
||||
top: 10,
|
||||
right: 30,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -244,11 +255,14 @@ const CardinalAreaChart = () => (
|
||||
|
||||
const EditorPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary" size="large" style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}>
|
||||
<Button type="primary"
|
||||
size="large"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}
|
||||
>
|
||||
<a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
|
||||
</Button>
|
||||
<Row gutter={32}>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Row, Col, Card, Button } from 'antd'
|
||||
import Container from '../Container'
|
||||
import {
|
||||
BarChart,
|
||||
Bar,
|
||||
@@ -11,6 +10,7 @@ import {
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
import Container from '../Container'
|
||||
|
||||
const data = [
|
||||
{
|
||||
@@ -96,12 +96,14 @@ const colProps = {
|
||||
|
||||
const SimpleBarChart = () => (
|
||||
<Container>
|
||||
<BarChart data={data} margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<BarChart data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -115,12 +117,14 @@ const SimpleBarChart = () => (
|
||||
|
||||
const StackedBarChart = () => (
|
||||
<Container>
|
||||
<BarChart data={data} margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<BarChart data={data}
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -134,12 +138,14 @@ const StackedBarChart = () => (
|
||||
|
||||
const MixBarChart = () => (
|
||||
<Container>
|
||||
<BarChart data={mixData} margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<BarChart data={mixData}
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -155,8 +161,8 @@ const MixBarChart = () => (
|
||||
// CustomShapeBarChart
|
||||
const getPath = (x, y, width, height) => {
|
||||
return `M${x},${y + height}
|
||||
C${x + width / 3},${y + height} ${x + width / 2},${y + height / 3} ${x + width / 2}, ${y}
|
||||
C${x + width / 2},${y + height / 3} ${x + 2 * width / 3},${y + height} ${x + width}, ${y + height}
|
||||
C${x + (width / 3)},${y + height} ${x + (width / 2)},${y + (height / 3)} ${x + (width / 2)}, ${y}
|
||||
C${x + (width / 2)},${y + (height / 3)} ${x + (2 * (width / 3))},${y + height} ${x + width}, ${y + height}
|
||||
Z`
|
||||
}
|
||||
|
||||
@@ -175,27 +181,32 @@ TriangleBar.propTypes = {
|
||||
|
||||
const CustomShapeBarChart = () => (
|
||||
<Container>
|
||||
<BarChart data={mixData} margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<BarChart data={mixData}
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Bar dataKey="female" fill="#8884d8" shape={< TriangleBar />} label />
|
||||
<Bar dataKey="female" fill="#8884d8" shape={<TriangleBar />} label />
|
||||
</BarChart>
|
||||
</Container>
|
||||
)
|
||||
|
||||
const EditorPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary" size="large" style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}>
|
||||
<Button type="primary"
|
||||
size="large"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}
|
||||
>
|
||||
<a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
|
||||
</Button>
|
||||
<Row gutter={32}>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Row, Col, Card, Button } from 'antd'
|
||||
import Container from '../Container'
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
@@ -11,6 +10,7 @@ import {
|
||||
Tooltip,
|
||||
Legend,
|
||||
} from 'recharts'
|
||||
import Container from '../Container'
|
||||
|
||||
const data = [
|
||||
{
|
||||
@@ -58,20 +58,26 @@ const colProps = {
|
||||
|
||||
const SimpleLineChart = () => (
|
||||
<Container>
|
||||
<LineChart data={data} margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<LineChart data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{
|
||||
r: 8,
|
||||
}} />
|
||||
<Line type="monotone"
|
||||
dataKey="pv"
|
||||
stroke="#8884d8"
|
||||
activeDot={{
|
||||
r: 8,
|
||||
}}
|
||||
/>
|
||||
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
</Container>
|
||||
@@ -79,12 +85,17 @@ const SimpleLineChart = () => (
|
||||
|
||||
const VerticalLineChart = () => (
|
||||
<Container>
|
||||
<LineChart layout="vertical" width={600} height={300} data={data} margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<LineChart layout="vertical"
|
||||
width={600}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 20,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<XAxis type="number" />
|
||||
<YAxis dataKey="name" type="category" />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -98,12 +109,16 @@ const VerticalLineChart = () => (
|
||||
|
||||
const DashedLineChart = () => (
|
||||
<Container>
|
||||
<LineChart width={600} height={300} data={data} margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<LineChart width={600}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
@@ -140,18 +155,22 @@ CustomizedDot.propTypes = {
|
||||
|
||||
const CustomizedDotLineChart = () => (
|
||||
<Container>
|
||||
<LineChart width={600} height={300} data={data} margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}>
|
||||
<LineChart width={600}
|
||||
height={300}
|
||||
data={data}
|
||||
margin={{
|
||||
top: 5,
|
||||
right: 30,
|
||||
left: 20,
|
||||
bottom: 5,
|
||||
}}
|
||||
>
|
||||
<XAxis dataKey="name" />
|
||||
<YAxis />
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<Tooltip />
|
||||
<Legend />
|
||||
<Line type="monotone" dataKey="pv" stroke="#8884d8" dot={< CustomizedDot />} />
|
||||
<Line type="monotone" dataKey="pv" stroke="#8884d8" dot={<CustomizedDot />} />
|
||||
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
|
||||
</LineChart>
|
||||
</Container>
|
||||
@@ -159,11 +178,14 @@ const CustomizedDotLineChart = () => (
|
||||
|
||||
const EditorPage = () => (
|
||||
<div className="content-inner">
|
||||
<Button type="primary" size="large" style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}>
|
||||
<Button type="primary"
|
||||
size="large"
|
||||
style={{
|
||||
position: 'absolute',
|
||||
right: 0,
|
||||
top: -48,
|
||||
}}
|
||||
>
|
||||
<a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">Show More</a>
|
||||
</Button>
|
||||
<Row gutter={32}>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table, Tag } from 'antd'
|
||||
import { color } from 'utils'
|
||||
import styles from './browser.less'
|
||||
import { color } from '../../../utils'
|
||||
|
||||
const status = {
|
||||
1: {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table, Tag } from 'antd'
|
||||
import { color } from 'utils'
|
||||
import styles from './comments.less'
|
||||
import { color } from '../../../utils'
|
||||
|
||||
const status = {
|
||||
1: {
|
||||
@@ -30,14 +30,14 @@ function Comments ({ data }) {
|
||||
}, {
|
||||
title: 'content',
|
||||
dataIndex: 'content',
|
||||
render: (text, it) => <div>
|
||||
render: (text, it) => (<div>
|
||||
<h5 className={styles.name}>{it.name}</h5>
|
||||
<p className={styles.content}>{it.content}</p>
|
||||
<div className={styles.daterow}>
|
||||
<Tag color={status[it.status].color}>{status[it.status].text}</Tag>
|
||||
<span className={styles.date}>{it.date}</span>
|
||||
</div>
|
||||
</div>,
|
||||
</div>),
|
||||
},
|
||||
]
|
||||
return (
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './completed.less'
|
||||
import classnames from 'classnames'
|
||||
import { color } from '../../../utils'
|
||||
import { color } from 'utils'
|
||||
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
|
||||
import styles from './completed.less'
|
||||
|
||||
function Completed ({ data }) {
|
||||
return (
|
||||
@@ -12,7 +12,7 @@ function Completed ({ data }) {
|
||||
<ResponsiveContainer minHeight={360}>
|
||||
<AreaChart data={data}>
|
||||
<Legend verticalAlign="top"
|
||||
content={prop => {
|
||||
content={(prop) => {
|
||||
const { payload } = prop
|
||||
return (<ul className={classnames({ [styles.legend]: true, clearfix: true })}>
|
||||
{payload.map((item, key) => <li key={key}><span className={styles.radiusdot} style={{ background: item.color }} />{item.value}</li>)}
|
||||
@@ -24,7 +24,7 @@ function Completed ({ data }) {
|
||||
<CartesianGrid vertical={false} stroke={color.borderBase} strokeDasharray="3 3" />
|
||||
<Tooltip
|
||||
wrapperStyle={{ border: 'none', boxShadow: '4px 4px 40px rgba(0, 0, 0, 0.05)' }}
|
||||
content={content => {
|
||||
content={(content) => {
|
||||
const list = content.payload.map((item, key) => <li key={key} className={styles.tipitem}><span className={styles.radiusdot} style={{ background: item.color }} />{`${item.name}:${item.value}`}</li>)
|
||||
return <div className={styles.tooltip}><p className={styles.tiptitle}>{content.label}</p><ul>{list}</ul></div>
|
||||
}}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './cpu.less'
|
||||
import { color } from '../../../utils'
|
||||
import { color } from 'utils'
|
||||
import CountUp from 'react-countup'
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, ResponsiveContainer } from 'recharts'
|
||||
import styles from './cpu.less'
|
||||
|
||||
const countUpProps = {
|
||||
start: 0,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table, Tag } from 'antd'
|
||||
import { color } from 'utils'
|
||||
import styles from './recentSales.less'
|
||||
import { color } from '../../../utils'
|
||||
|
||||
const status = {
|
||||
1: {
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './sales.less'
|
||||
import classnames from 'classnames'
|
||||
import { color } from '../../../utils'
|
||||
import { color } from 'utils'
|
||||
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
|
||||
import styles from './sales.less'
|
||||
|
||||
function Sales ({ data }) {
|
||||
return (
|
||||
@@ -12,7 +12,7 @@ function Sales ({ data }) {
|
||||
<ResponsiveContainer minHeight={360}>
|
||||
<LineChart data={data}>
|
||||
<Legend verticalAlign="top"
|
||||
content={prop => {
|
||||
content={(prop) => {
|
||||
const { payload } = prop
|
||||
return (<ul className={classnames({ [styles.legend]: true, clearfix: true })}>
|
||||
{payload.map((item, key) => <li key={key}><span className={styles.radiusdot} style={{ background: item.color }} />{item.value}</li>)}
|
||||
@@ -24,7 +24,7 @@ function Sales ({ data }) {
|
||||
<CartesianGrid vertical={false} stroke={color.borderBase} strokeDasharray="3 3" />
|
||||
<Tooltip
|
||||
wrapperStyle={{ border: 'none', boxShadow: '4px 4px 40px rgba(0, 0, 0, 0.05)' }}
|
||||
content={content => {
|
||||
content={(content) => {
|
||||
const list = content.payload.map((item, key) => <li key={key} className={styles.tipitem}><span className={styles.radiusdot} style={{ background: item.color }} />{`${item.name}:${item.value}`}</li>)
|
||||
return <div className={styles.tooltip}><p className={styles.tiptitle}>{content.label}</p><ul>{list}</ul></div>
|
||||
}}
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Button } from 'antd'
|
||||
import styles from './user.less'
|
||||
import CountUp from 'react-countup'
|
||||
import { color } from '../../../utils'
|
||||
import { color } from 'utils'
|
||||
import styles from './user.less'
|
||||
|
||||
const countUpProps = {
|
||||
start: 0,
|
||||
duration: 2.75,
|
||||
|
||||
@@ -5,9 +5,11 @@ import styles from './weather.less'
|
||||
function Weather ({ city, icon, dateTime, temperature, name }) {
|
||||
return (<div className={styles.weather}>
|
||||
<div className={styles.left}>
|
||||
<div className={styles.icon} style={{
|
||||
backgroundImage: `url(${icon})`,
|
||||
}} />
|
||||
<div className={styles.icon}
|
||||
style={{
|
||||
backgroundImage: `url(${icon})`,
|
||||
}}
|
||||
/>
|
||||
<p>{name}</p>
|
||||
</div>
|
||||
<div className={styles.right}>
|
||||
|
||||
@@ -35,6 +35,7 @@
|
||||
font-size: 36px;
|
||||
text-align: right;
|
||||
height: 64px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.description {
|
||||
|
||||
@@ -2,9 +2,9 @@ import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'dva'
|
||||
import { Row, Col, Card } from 'antd'
|
||||
import { color } from 'utils'
|
||||
import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components'
|
||||
import styles from './index.less'
|
||||
import { color } from '../../utils'
|
||||
|
||||
const bodyStyle = {
|
||||
bodyStyle: {
|
||||
@@ -15,37 +15,45 @@ const bodyStyle = {
|
||||
|
||||
function Dashboard ({ dashboard }) {
|
||||
const { weather, sales, quote, numbers, recentSales, comments, completed, browser, cpu, user } = dashboard
|
||||
const numberCards = numbers.map((item, key) => <Col key={key} lg={6} md={12}>
|
||||
const numberCards = numbers.map((item, key) => (<Col key={key} lg={6} md={12}>
|
||||
<NumberCard {...item} />
|
||||
</Col>)
|
||||
</Col>))
|
||||
|
||||
return (
|
||||
<Row gutter={24}>
|
||||
{numberCards}
|
||||
<Col lg={18} md={24}>
|
||||
<Card bordered={false} bodyStyle={{
|
||||
padding: '24px 36px 24px 0',
|
||||
}}>
|
||||
<Card bordered={false}
|
||||
bodyStyle={{
|
||||
padding: '24px 36px 24px 0',
|
||||
}}
|
||||
>
|
||||
<Sales data={sales} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={6} md={24}>
|
||||
<Row gutter={24}>
|
||||
<Col lg={24} md={12}>
|
||||
<Card bordered={false} className={styles.weather} bodyStyle={{
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: color.blue,
|
||||
}}>
|
||||
<Card bordered={false}
|
||||
className={styles.weather}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: color.blue,
|
||||
}}
|
||||
>
|
||||
<Weather {...weather} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={24} md={12}>
|
||||
<Card bordered={false} className={styles.quote} bodyStyle={{
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: color.peach,
|
||||
}}>
|
||||
<Card bordered={false}
|
||||
className={styles.quote}
|
||||
bodyStyle={{
|
||||
padding: 0,
|
||||
height: 204,
|
||||
background: color.peach,
|
||||
}}
|
||||
>
|
||||
<Quote {...quote} />
|
||||
</Card>
|
||||
</Col>
|
||||
@@ -62,9 +70,11 @@ function Dashboard ({ dashboard }) {
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={24} md={24}>
|
||||
<Card bordered={false} bodyStyle={{
|
||||
padding: '24px 36px 24px 0',
|
||||
}}>
|
||||
<Card bordered={false}
|
||||
bodyStyle={{
|
||||
padding: '24px 36px 24px 0',
|
||||
}}
|
||||
>
|
||||
<Completed data={completed} />
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
@@ -2,11 +2,11 @@ import React from 'react'
|
||||
import { Icon } from 'antd'
|
||||
import styles from './index.less'
|
||||
|
||||
const Error = () => <div className="content-inner">
|
||||
const Error = () => (<div className="content-inner">
|
||||
<div className={styles.error}>
|
||||
<Icon type="frown-o" />
|
||||
<h1>404 Not Found</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>)
|
||||
|
||||
export default Error
|
||||
|
||||
@@ -2,7 +2,7 @@ import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'dva'
|
||||
import { Button, Row, Form, Input } from 'antd'
|
||||
import { config } from '../../utils'
|
||||
import { config } from 'utils'
|
||||
import styles from './index.less'
|
||||
|
||||
const FormItem = Form.Item
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
import React from 'react'
|
||||
import { Table } from 'antd'
|
||||
import styles from './List.less'
|
||||
|
||||
const List = ({ ...tableProps }) => {
|
||||
const columns = [
|
||||
{
|
||||
title: 'Image',
|
||||
dataIndex: 'image',
|
||||
className: styles.image,
|
||||
width: 64,
|
||||
render: text => <img alt="Feture" width={26} src={text} />,
|
||||
}, {
|
||||
title: 'Title',
|
||||
dataIndex: 'title',
|
||||
}, {
|
||||
title: 'Author',
|
||||
dataIndex: 'author',
|
||||
}, {
|
||||
title: 'Categories',
|
||||
dataIndex: 'categories',
|
||||
}, {
|
||||
title: 'Tags',
|
||||
dataIndex: 'tags',
|
||||
}, {
|
||||
title: 'Visibility',
|
||||
dataIndex: 'visibility',
|
||||
}, {
|
||||
title: 'Comments',
|
||||
dataIndex: 'comments',
|
||||
}, {
|
||||
title: 'Views',
|
||||
dataIndex: 'views',
|
||||
}, {
|
||||
title: 'Date',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
{...tableProps}
|
||||
bordered
|
||||
scroll={{ x: 1200 }}
|
||||
columns={columns}
|
||||
simple
|
||||
className={styles.table}
|
||||
rowKey={record => record.id}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default List
|
||||
@@ -0,0 +1,16 @@
|
||||
.table {
|
||||
td.image {
|
||||
line-height: 1;
|
||||
|
||||
img {
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-table-tbody > tr > td,
|
||||
.ant-table-thead > tr > th {
|
||||
height: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { connect } from 'dva'
|
||||
import { Tabs } from 'antd'
|
||||
import { routerRedux } from 'dva/router'
|
||||
import List from './List'
|
||||
|
||||
const TabPane = Tabs.TabPane
|
||||
|
||||
const EnumPostStatus = {
|
||||
UNPUBLISH: 1,
|
||||
PUBLISHED: 2,
|
||||
}
|
||||
|
||||
|
||||
const Index = ({ post, dispatch, loading, location }) => {
|
||||
const { list, pagination } = post
|
||||
const { query = {}, pathname } = location
|
||||
|
||||
const listProps = {
|
||||
pagination,
|
||||
dataSource: list,
|
||||
loading: loading.effects['post/query'],
|
||||
onChange (page) {
|
||||
dispatch(routerRedux.push({
|
||||
pathname,
|
||||
query: {
|
||||
...query,
|
||||
page: page.current,
|
||||
pageSize: page.pageSize,
|
||||
},
|
||||
}))
|
||||
},
|
||||
}
|
||||
|
||||
const handleTabClick = (key) => {
|
||||
dispatch(routerRedux.push({
|
||||
pathname,
|
||||
query: {
|
||||
status: key,
|
||||
},
|
||||
}))
|
||||
}
|
||||
|
||||
|
||||
return (<div className="content-inner">
|
||||
<Tabs activeKey={query.status === String(EnumPostStatus.UNPUBLISH) ? String(EnumPostStatus.UNPUBLISH) : String(EnumPostStatus.PUBLISHED)} onTabClick={handleTabClick}>
|
||||
<TabPane tab="Publised" key={String(EnumPostStatus.PUBLISHED)}>
|
||||
<List {...listProps} />
|
||||
</TabPane>
|
||||
<TabPane tab="Unpublish" key={String(EnumPostStatus.UNPUBLISH)}>
|
||||
<List {...listProps} />
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>)
|
||||
}
|
||||
|
||||
Index.propTypes = {
|
||||
post: PropTypes.object,
|
||||
loading: PropTypes.object,
|
||||
location: PropTypes.object,
|
||||
dispatch: PropTypes.func,
|
||||
}
|
||||
|
||||
export default connect(({ post, loading }) => ({ post, loading }))(Index)
|
||||
+31
-21
@@ -1,7 +1,6 @@
|
||||
import React from 'react'
|
||||
import styles from './index.less'
|
||||
import Mock from 'mockjs'
|
||||
import { request, config } from '../../utils'
|
||||
import { request, config } from 'utils'
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
@@ -10,20 +9,22 @@ import {
|
||||
Input,
|
||||
Button,
|
||||
} from 'antd'
|
||||
const { api, baseURL } = config
|
||||
const { dashboard, users, userLogin, user } = api
|
||||
import styles from './index.less'
|
||||
|
||||
const { api } = config
|
||||
const { dashboard, users, userLogin, user, v1test, v2test } = api
|
||||
|
||||
const requestOptions = [
|
||||
{
|
||||
url: baseURL + user.replace('/:id', ''),
|
||||
url: user.replace('/:id', ''),
|
||||
desc: 'intercept request by mock.js',
|
||||
},
|
||||
{
|
||||
url: baseURL + dashboard,
|
||||
url: dashboard,
|
||||
desc: 'intercept request by mock.js',
|
||||
},
|
||||
{
|
||||
url: baseURL + userLogin,
|
||||
url: userLogin,
|
||||
method: 'post',
|
||||
data: {
|
||||
username: 'guest',
|
||||
@@ -32,18 +33,18 @@ const requestOptions = [
|
||||
desc: 'intercept request by mock.js',
|
||||
},
|
||||
{
|
||||
url: baseURL + users,
|
||||
url: users,
|
||||
desc: 'intercept request by mock.js',
|
||||
},
|
||||
{
|
||||
url: baseURL + user,
|
||||
url: user,
|
||||
desc: 'intercept request by mock.js',
|
||||
data: Mock.mock({
|
||||
id: '@id',
|
||||
}),
|
||||
},
|
||||
{
|
||||
url: baseURL + user.replace('/:id', ''),
|
||||
url: user.replace('/:id', ''),
|
||||
desc: 'intercept request by mock.js',
|
||||
method: 'post',
|
||||
data: Mock.mock({
|
||||
@@ -60,7 +61,7 @@ const requestOptions = [
|
||||
}),
|
||||
},
|
||||
{
|
||||
url: baseURL + user,
|
||||
url: user,
|
||||
desc: 'intercept request by mock.js',
|
||||
method: 'patch',
|
||||
data: Mock.mock({
|
||||
@@ -69,7 +70,7 @@ const requestOptions = [
|
||||
}),
|
||||
},
|
||||
{
|
||||
url: baseURL + user,
|
||||
url: user,
|
||||
desc: 'intercept request by mock.js',
|
||||
method: 'delete',
|
||||
data: Mock.mock({
|
||||
@@ -77,7 +78,12 @@ const requestOptions = [
|
||||
}),
|
||||
},
|
||||
{
|
||||
url: `${baseURL}/test`,
|
||||
url: v1test,
|
||||
desc: 'intercept request by mock.js',
|
||||
method: 'get',
|
||||
},
|
||||
{
|
||||
url: v2test,
|
||||
desc: 'intercept request by mock.js',
|
||||
method: 'get',
|
||||
},
|
||||
@@ -129,7 +135,7 @@ export default class RequestPage extends React.Component {
|
||||
const state = this.state
|
||||
const curretUrl = value.split('?')[0]
|
||||
const curretMethod = value.split('?')[1]
|
||||
const currntItem = requestOptions.filter(item => {
|
||||
const currntItem = requestOptions.filter((item) => {
|
||||
const { method = 'get' } = item
|
||||
return curretUrl === item.url && curretMethod === method
|
||||
})
|
||||
@@ -149,14 +155,18 @@ export default class RequestPage extends React.Component {
|
||||
<div className="content-inner">
|
||||
<Row gutter={32}>
|
||||
<Col {...colProps}>
|
||||
<Card title="Request" style={{
|
||||
overflow: 'visible',
|
||||
}}>
|
||||
<Card title="Request"
|
||||
style={{
|
||||
overflow: 'visible',
|
||||
}}
|
||||
>
|
||||
<div className={styles.option}>
|
||||
<Select style={{
|
||||
width: '100%',
|
||||
flex: 1,
|
||||
}} defaultValue={`${method.toLocaleUpperCase()} ${requestOptions[0].url}`}
|
||||
<Select
|
||||
style={{
|
||||
width: '100%',
|
||||
flex: 1,
|
||||
}}
|
||||
defaultValue={`${method.toLocaleUpperCase()} ${requestOptions[0].url}`}
|
||||
size="large"
|
||||
onChange={this.handeleURLChange}
|
||||
>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import moment from 'moment'
|
||||
import { FilterItem } from '../../components'
|
||||
import { FilterItem } from 'components'
|
||||
import { Form, Button, Row, Col, DatePicker, Input, Cascader, Switch } from 'antd'
|
||||
import city from '../../utils/city'
|
||||
|
||||
@@ -101,7 +101,7 @@ const Filter = ({
|
||||
</FilterItem>
|
||||
</Col>
|
||||
<Col {...TwoColProps} xl={{ span: 10 }} md={{ span: 24 }} sm={{ span: 24 }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap' }}>
|
||||
<div >
|
||||
<Button type="primary" size="large" className="margin-right" onClick={handleSubmit}>Search</Button>
|
||||
<Button size="large" onClick={handleReset}>Reset</Button>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Table, Modal } from 'antd'
|
||||
import styles from './List.less'
|
||||
import classnames from 'classnames'
|
||||
import AnimTableBody from '../../components/DataTable/AnimTableBody'
|
||||
import { DropOption } from '../../components'
|
||||
import { DropOption } from 'components'
|
||||
import { Link } from 'dva/router'
|
||||
import AnimTableBody from '../../components/DataTable/AnimTableBody'
|
||||
import styles from './List.less'
|
||||
|
||||
const confirm = Modal.confirm
|
||||
|
||||
@@ -30,7 +30,7 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
|
||||
key: 'avatar',
|
||||
width: 64,
|
||||
className: styles.avatar,
|
||||
render: (text) => <img alt={'avatar'} width={24} src={text} />,
|
||||
render: text => <img alt={'avatar'} width={24} src={text} />,
|
||||
}, {
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
@@ -48,9 +48,9 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
|
||||
title: 'Gender',
|
||||
dataIndex: 'isMale',
|
||||
key: 'isMale',
|
||||
render: (text) => <span>{text
|
||||
? 'Male'
|
||||
: 'Female'}</span>,
|
||||
render: text => (<span>{text
|
||||
? 'Male'
|
||||
: 'Female'}</span>),
|
||||
}, {
|
||||
title: 'Phone',
|
||||
dataIndex: 'phone',
|
||||
@@ -82,7 +82,7 @@ const List = ({ onDeleteItem, onEditItem, isMotion, location, ...tableProps }) =
|
||||
current: tableProps.pagination.current,
|
||||
}
|
||||
|
||||
const getBodyWrapper = body => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body }
|
||||
const getBodyWrapper = (body) => { return isMotion ? <AnimTableBody {...getBodyWrapperProps} body={body} /> : body }
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
@@ -23,7 +23,6 @@ const Detail = ({ userDetail }) => {
|
||||
|
||||
Detail.propTypes = {
|
||||
userDetail: PropTypes.object,
|
||||
loading: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default connect(({ userDetail, loading }) => ({ userDetail, loading: loading.models.userDetail }))(Detail)
|
||||
|
||||
@@ -128,15 +128,15 @@ const User = ({ location, dispatch, user, loading }) => {
|
||||
<div className="content-inner">
|
||||
<Filter {...filterProps} />
|
||||
{
|
||||
selectedRowKeys.length > 0 &&
|
||||
<Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
|
||||
<Col>
|
||||
{`Selected ${selectedRowKeys.length} items `}
|
||||
<Popconfirm title={'Are you sure delete these items?'} placement="left" onConfirm={handleDeleteItems}>
|
||||
<Button type="primary" size="large" style={{ marginLeft: 8 }}>Remove</Button>
|
||||
</Popconfirm>
|
||||
</Col>
|
||||
</Row>
|
||||
selectedRowKeys.length > 0 &&
|
||||
<Row style={{ marginBottom: 24, textAlign: 'right', fontSize: 13 }}>
|
||||
<Col>
|
||||
{`Selected ${selectedRowKeys.length} items `}
|
||||
<Popconfirm title={'Are you sure delete these items?'} placement="left" onConfirm={handleDeleteItems}>
|
||||
<Button type="primary" size="large" style={{ marginLeft: 8 }}>Remove</Button>
|
||||
</Popconfirm>
|
||||
</Col>
|
||||
</Row>
|
||||
}
|
||||
<List {...listProps} />
|
||||
{modalVisible && <Modal {...modalProps} />}
|
||||
|
||||
+2
-1
@@ -1,4 +1,5 @@
|
||||
import { request, config } from '../utils'
|
||||
import { request, config } from 'utils'
|
||||
|
||||
const { api } = config
|
||||
const { user, userLogout, userLogin } = api
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { request, config } from '../utils'
|
||||
import { request, config } from 'utils'
|
||||
|
||||
const { api } = config
|
||||
const { dashboard } = api
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { request, config } from '../utils'
|
||||
import { request, config } from 'utils'
|
||||
|
||||
const { api } = config
|
||||
const { userLogin } = api
|
||||
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
import { request, config } from 'utils'
|
||||
|
||||
const { api } = config
|
||||
const { menus } = api
|
||||
|
||||
export async function query (params) {
|
||||
return request({
|
||||
url: menus,
|
||||
method: 'get',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { request, config } from 'utils'
|
||||
|
||||
const { api } = config
|
||||
const { posts } = api
|
||||
|
||||
export async function query (params) {
|
||||
return request({
|
||||
url: posts,
|
||||
method: 'get',
|
||||
data: params,
|
||||
})
|
||||
}
|
||||
@@ -1,4 +1,5 @@
|
||||
import { request, config } from '../utils'
|
||||
import { request, config } from 'utils'
|
||||
|
||||
const { api } = config
|
||||
const { user } = api
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { request, config } from '../utils'
|
||||
import { request, config } from 'utils'
|
||||
|
||||
const { api } = config
|
||||
const { users } = api
|
||||
|
||||
|
||||
+7
-10
@@ -90,16 +90,6 @@ body {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
&:hover {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-pagination-item {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-select-dropdown-menu-item {
|
||||
padding: 12px 16px !important;
|
||||
}
|
||||
@@ -125,6 +115,13 @@ body {
|
||||
}
|
||||
@media (max-width: 767px) {
|
||||
:global {
|
||||
.ant-pagination-item,
|
||||
.ant-pagination-next,
|
||||
.ant-pagination-options,
|
||||
.ant-pagination-prev {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
.ant-card-head {
|
||||
padding: 0 12px;
|
||||
|
||||
+4
-4
@@ -4025,18 +4025,18 @@ let DICT = {
|
||||
const tree = (list) => {
|
||||
let mapped = {}
|
||||
let item
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
for (let i = 0; i < list.length; i += 1) {
|
||||
item = list[i]
|
||||
if (!item || !item.id) continue
|
||||
mapped[item.id] = item
|
||||
}
|
||||
|
||||
let result = []
|
||||
for (let ii = 0; ii < list.length; ii++) {
|
||||
for (let ii = 0; ii < list.length; ii += 1) {
|
||||
item = list[ii]
|
||||
|
||||
if (!item) continue
|
||||
/* jshint -W041 */
|
||||
/* jshint -W041 */
|
||||
if (item.pid === undefined && item.parentId === undefined) {
|
||||
result.push(item)
|
||||
continue
|
||||
@@ -4056,7 +4056,7 @@ let DICT_FIXED = (function () {
|
||||
let pid
|
||||
if (id.slice(2, 6) !== '0000') {
|
||||
pid = id.slice(4, 6) === '00' ? (`${id.slice(0, 2)}0000`) :
|
||||
`${id.slice(0, 4)}00`
|
||||
`${id.slice(0, 4)}00`
|
||||
}
|
||||
fixed.push({
|
||||
id,
|
||||
|
||||
+14
-8
@@ -1,3 +1,6 @@
|
||||
const APIV1 = '/api/v1'
|
||||
const APIV2 = '/api/v2'
|
||||
|
||||
module.exports = {
|
||||
name: 'AntD Admin',
|
||||
prefix: 'antdAdmin',
|
||||
@@ -5,17 +8,20 @@ module.exports = {
|
||||
logo: '/logo.png',
|
||||
iconFontCSS: '/iconfont.css',
|
||||
iconFontJS: '/iconfont.js',
|
||||
baseURL: 'http://localhost:8000/api/v1',
|
||||
YQL: ['http://www.zuimeitianqi.com'],
|
||||
CORS: ['http://localhost:7000'],
|
||||
CORS: [],
|
||||
openPages: ['/login'],
|
||||
apiPrefix: '/api/v1',
|
||||
api: {
|
||||
userLogin: '/user/login',
|
||||
userLogout: '/user/logout',
|
||||
userInfo: '/userInfo',
|
||||
users: '/users',
|
||||
user: '/user/:id',
|
||||
dashboard: '/dashboard',
|
||||
userLogin: `${APIV1}/user/login`,
|
||||
userLogout: `${APIV1}/user/logout`,
|
||||
userInfo: `${APIV1}/userInfo`,
|
||||
users: `${APIV1}/users`,
|
||||
posts: `${APIV1}/posts`,
|
||||
user: `${APIV1}/user/:id`,
|
||||
dashboard: `${APIV1}/dashboard`,
|
||||
menus: `${APIV1}/menus`,
|
||||
v1test: `${APIV1}/test`,
|
||||
v2test: `${APIV2}/test`,
|
||||
},
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
const EnumRoleType = {
|
||||
ADMIN: 'admin',
|
||||
DEFAULT: 'admin',
|
||||
DEVELOPER: 'developer',
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
EnumRoleType,
|
||||
}
|
||||
+4
-5
@@ -1,9 +1,9 @@
|
||||
import config from './config'
|
||||
import menu from './menu'
|
||||
import request from './request'
|
||||
/* global window */
|
||||
import classnames from 'classnames'
|
||||
import { color } from './theme'
|
||||
import lodash from 'lodash'
|
||||
import config from './config'
|
||||
import request from './request'
|
||||
import { color } from './theme'
|
||||
|
||||
// 连字符转驼峰
|
||||
String.prototype.hyphenToHump = function () {
|
||||
@@ -101,7 +101,6 @@ const arrayToTree = (array, id = 'id', pid = 'pid', children = 'children') => {
|
||||
|
||||
module.exports = {
|
||||
config,
|
||||
menu,
|
||||
request,
|
||||
color,
|
||||
classnames,
|
||||
|
||||
@@ -1,147 +0,0 @@
|
||||
module.exports = [
|
||||
{
|
||||
id: 1,
|
||||
icon: 'laptop',
|
||||
name: 'Dashboard',
|
||||
router: '/dashboard',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
bpid: 1,
|
||||
name: 'User Manage',
|
||||
icon: 'user',
|
||||
router: '/user',
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
mpid: -1,
|
||||
bpid: 2,
|
||||
name: 'User Detail',
|
||||
router: '/user/:id',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
bpid: 1,
|
||||
name: 'Request',
|
||||
icon: 'api',
|
||||
router: '/request',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
bpid: 1,
|
||||
name: 'UI Element',
|
||||
icon: 'camera-o',
|
||||
},
|
||||
{
|
||||
id: 41,
|
||||
bpid: 4,
|
||||
mpid: 4,
|
||||
name: 'IconFont',
|
||||
icon: 'heart-o',
|
||||
router: '/UIElement/iconfont',
|
||||
},
|
||||
{
|
||||
id: 42,
|
||||
bpid: 4,
|
||||
mpid: 4,
|
||||
name: 'DataTable',
|
||||
icon: 'database',
|
||||
router: '/UIElement/dataTable',
|
||||
},
|
||||
{
|
||||
id: 43,
|
||||
bpid: 4,
|
||||
mpid: 4,
|
||||
name: 'DropOption',
|
||||
icon: 'bars',
|
||||
router: '/UIElement/dropOption',
|
||||
},
|
||||
{
|
||||
id: 44,
|
||||
bpid: 4,
|
||||
mpid: 4,
|
||||
name: 'Search',
|
||||
icon: 'search',
|
||||
router: '/UIElement/search',
|
||||
},
|
||||
{
|
||||
id: 45,
|
||||
bpid: 4,
|
||||
mpid: 4,
|
||||
name: 'Editor',
|
||||
icon: 'edit',
|
||||
router: '/UIElement/editor',
|
||||
},
|
||||
{
|
||||
id: 46,
|
||||
bpid: 4,
|
||||
mpid: 4,
|
||||
name: 'layer (Function)',
|
||||
icon: 'credit-card',
|
||||
router: '/UIElement/layer',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
bpid: 1,
|
||||
name: 'Recharts',
|
||||
icon: 'code-o',
|
||||
},
|
||||
{
|
||||
id: 51,
|
||||
bpid: 5,
|
||||
mpid: 5,
|
||||
name: 'LineChart',
|
||||
icon: 'line-chart',
|
||||
router: '/chart/lineChart',
|
||||
},
|
||||
{
|
||||
id: 52,
|
||||
bpid: 5,
|
||||
mpid: 5,
|
||||
name: 'BarChart',
|
||||
icon: 'bar-chart',
|
||||
router: '/chart/barChart',
|
||||
},
|
||||
{
|
||||
id: 53,
|
||||
bpid: 5,
|
||||
mpid: 5,
|
||||
name: 'AreaChart',
|
||||
icon: 'area-chart',
|
||||
router: '/chart/areaChart',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
bpid: 1,
|
||||
name: 'Test Navigation',
|
||||
icon: 'setting',
|
||||
},
|
||||
{
|
||||
id: 61,
|
||||
bpid: 6,
|
||||
mpid: 6,
|
||||
name: 'Test Navigation1',
|
||||
router: '/navigation/navigation1',
|
||||
},
|
||||
{
|
||||
id: 62,
|
||||
bpid: 6,
|
||||
mpid: 6,
|
||||
name: 'Test Navigation2',
|
||||
router: '/navigation/navigation2',
|
||||
},
|
||||
{
|
||||
id: 621,
|
||||
bpid: 62,
|
||||
mpid: 62,
|
||||
name: 'Test Navigation21',
|
||||
router: '/navigation/navigation2/navigation1',
|
||||
},
|
||||
{
|
||||
id: 622,
|
||||
bpid: 62,
|
||||
mpid: 62,
|
||||
name: 'Test Navigation22',
|
||||
router: '/navigation/navigation2/navigation2',
|
||||
},
|
||||
]
|
||||
+15
-12
@@ -1,12 +1,11 @@
|
||||
/* global window */
|
||||
import axios from 'axios'
|
||||
import qs from 'qs'
|
||||
import { YQL, CORS, baseURL } from './config'
|
||||
import jsonp from 'jsonp'
|
||||
import lodash from 'lodash'
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
import { message } from 'antd'
|
||||
|
||||
axios.defaults.baseURL = baseURL
|
||||
import { YQL, CORS } from './config'
|
||||
|
||||
const fetch = (options) => {
|
||||
let {
|
||||
@@ -91,26 +90,30 @@ export default function request (options) {
|
||||
return fetch(options).then((response) => {
|
||||
const { statusText, status } = response
|
||||
let data = options.fetchType === 'YQL' ? response.data.query.results.json : response.data
|
||||
if (data instanceof Array) {
|
||||
data = {
|
||||
list: data,
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: statusText,
|
||||
status,
|
||||
statusCode: status,
|
||||
...data,
|
||||
}
|
||||
}).catch((error) => {
|
||||
const { response } = error
|
||||
let msg
|
||||
let status
|
||||
let otherData = {}
|
||||
if (response) {
|
||||
let statusCode
|
||||
if (response && response instanceof Object) {
|
||||
const { data, statusText } = response
|
||||
otherData = data
|
||||
status = response.status
|
||||
statusCode = response.status
|
||||
msg = data.message || statusText
|
||||
} else {
|
||||
status = 600
|
||||
msg = 'Network Error'
|
||||
statusCode = 600
|
||||
msg = error.message || 'Network Error'
|
||||
}
|
||||
return { success: false, status, message: msg, ...otherData }
|
||||
return { success: false, statusCode, message: msg }
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,71 @@
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
||||
const HtmlWebpackTemplate = require('html-webpack-template')
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin')
|
||||
|
||||
module.exports = (webpackConfig, env) => {
|
||||
// FilenameHash
|
||||
webpackConfig.output.chunkFilename = '[name].[hash].js'
|
||||
|
||||
if (env === 'production' && webpackConfig.module) {
|
||||
// ClassnameHash
|
||||
webpackConfig.module.rules.map((item) => {
|
||||
if (item.use && item.use[0] === 'style') {
|
||||
return item.use.map((iitem) => {
|
||||
if (iitem && iitem.loader === 'css') {
|
||||
iitem.options.localIdentName = '[hash:base64:5]'
|
||||
}
|
||||
return iitem
|
||||
})
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
|
||||
// PreLoaders
|
||||
// webpackConfig.module.preLoaders = [{
|
||||
// test: /\.js$/,
|
||||
// enforce: 'pre',
|
||||
// loader: 'eslint',
|
||||
// }]
|
||||
|
||||
webpackConfig.plugins = webpackConfig.plugins.concat([
|
||||
new CopyWebpackPlugin([
|
||||
{
|
||||
from: 'src/public',
|
||||
to: env === 'production' ? '../' : webpackConfig.output.outputPath,
|
||||
},
|
||||
]),
|
||||
new HtmlWebpackPlugin({
|
||||
hash: true,
|
||||
mobile: true,
|
||||
title: 'antd-admin',
|
||||
inject: false,
|
||||
appMountId: 'root',
|
||||
template: `!!ejs-loader!${HtmlWebpackTemplate}`,
|
||||
filename: env === 'production' ? '../index.html' : 'index.html',
|
||||
minify: {
|
||||
collapseWhitespace: true,
|
||||
},
|
||||
scripts: env === 'production' ? null : ['roadhog.dll.js'],
|
||||
meta: [
|
||||
{
|
||||
name: 'description',
|
||||
content: 'A admin dashboard application demo built upon Ant Design and Dva.js',
|
||||
}, {
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1.0',
|
||||
},
|
||||
],
|
||||
}),
|
||||
])
|
||||
|
||||
// Alias
|
||||
webpackConfig.resolve.alias = {
|
||||
components: `${__dirname}/src/components`,
|
||||
utils: `${__dirname}/src/utils`,
|
||||
config: `${__dirname}/src/utils/config`,
|
||||
enums: `${__dirname}/src/utils/enums`,
|
||||
}
|
||||
|
||||
return webpackConfig
|
||||
}
|
||||
Reference in New Issue
Block a user