From edf11583519f5928a0bb74c98f7041ddc701f760 Mon Sep 17 00:00:00 2001 From: hausir Date: Mon, 19 Jun 2017 13:51:03 +0800 Subject: [PATCH 1/4] fix logout menu block by show more button --- src/components/Layout/Header.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Layout/Header.less b/src/components/Layout/Header.less index 5e5f7f6..b984cd3 100644 --- a/src/components/Layout/Header.less +++ b/src/components/Layout/Header.less @@ -14,6 +14,7 @@ justify-content: space-between; height: 47px; background-color: #fff; + z-index: 999; .rightWarpper { display: flex; From 6df97916fa7151c5fdfc69961c192a12b969bafd Mon Sep 17 00:00:00 2001 From: zuiidea Date: Tue, 4 Jul 2017 22:44:48 +0800 Subject: [PATCH 2/4] webpack alias --- src/components/DataTable/DataTable.js | 2 +- src/components/Layout/Bread.js | 2 +- src/components/Layout/Footer.js | 2 +- src/components/Layout/Menu.js | 2 +- src/components/Layout/Sider.js | 2 +- src/models/app.js | 2 +- src/models/login.js | 2 +- src/models/user.js | 2 +- src/routes/UIElement/dataTable/index.js | 2 +- src/routes/UIElement/dropOption/index.js | 2 +- src/routes/UIElement/editor/index.js | 2 +- src/routes/UIElement/iconfont/index.js | 2 +- src/routes/UIElement/layer/index.js | 2 +- src/routes/UIElement/search/index.js | 2 +- src/routes/app.js | 4 ++-- src/routes/dashboard/components/browser.js | 2 +- src/routes/dashboard/components/comments.js | 2 +- src/routes/dashboard/components/completed.js | 2 +- src/routes/dashboard/components/cpu.js | 2 +- src/routes/dashboard/components/recentSales.js | 2 +- src/routes/dashboard/components/sales.js | 2 +- src/routes/dashboard/components/user.js | 2 +- src/routes/dashboard/index.js | 2 +- src/routes/login/index.js | 2 +- src/routes/request/index.js | 2 +- src/routes/user/Filter.js | 2 +- src/routes/user/List.js | 2 +- src/services/app.js | 2 +- src/services/dashboard.js | 2 +- src/services/login.js | 2 +- src/services/posts.js | 2 +- src/services/user.js | 2 +- src/services/users.js | 2 +- webpack.config.js | 8 ++++++++ 34 files changed, 42 insertions(+), 34 deletions(-) diff --git a/src/components/DataTable/DataTable.js b/src/components/DataTable/DataTable.js index 23eaf4a..597c424 100644 --- a/src/components/DataTable/DataTable.js +++ b/src/components/DataTable/DataTable.js @@ -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' diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js index 7566c54..75e74f2 100644 --- a/src/components/Layout/Bread.js +++ b/src/components/Layout/Bread.js @@ -4,7 +4,7 @@ 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' const Bread = ({ menu }) => { // 匹配当前路由 diff --git a/src/components/Layout/Footer.js b/src/components/Layout/Footer.js index 6e7f6bb..dd754c0 100644 --- a/src/components/Layout/Footer.js +++ b/src/components/Layout/Footer.js @@ -1,6 +1,6 @@ import React from 'react' import styles from './Footer.less' -import { config } from '../../utils' +import { config } from 'utils' const Footer = () =>
{config.footerText} diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index a9cedcd..7ad8fe7 100644 --- a/src/components/Layout/Menu.js +++ b/src/components/Layout/Menu.js @@ -2,7 +2,7 @@ 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 }) => { diff --git a/src/components/Layout/Sider.js b/src/components/Layout/Sider.js index d60834d..22ec010 100644 --- a/src/components/Layout/Sider.js +++ b/src/components/Layout/Sider.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Icon, Switch } from 'antd' import styles from './Layout.less' -import { config } from '../../utils' +import { config } from 'utils' import Menus from './Menu' const Sider = ({ siderFold, darkTheme, location, changeTheme, navOpenKeys, changeOpenKeys, menu }) => { diff --git a/src/models/app.js b/src/models/app.js index 2ed12b8..3ff0667 100644 --- a/src/models/app.js +++ b/src/models/app.js @@ -1,7 +1,7 @@ import { query, logout } from '../services/app' import { routerRedux } from 'dva/router' import { parse } from 'qs' -import { config } from '../utils' +import { config } from 'utils' const { prefix } = config export default { diff --git a/src/models/login.js b/src/models/login.js index d47a4a8..e9137ea 100644 --- a/src/models/login.js +++ b/src/models/login.js @@ -1,6 +1,6 @@ import { login } from '../services/login' import { routerRedux } from 'dva/router' -import { queryURL } from '../utils' +import { queryURL } from 'utils' export default { namespace: 'login', diff --git a/src/models/user.js b/src/models/user.js index 7db44c5..182023e 100644 --- a/src/models/user.js +++ b/src/models/user.js @@ -2,7 +2,7 @@ import modelExtend from 'dva-model-extend' import { create, remove, update } from '../services/user' import * as usersService from '../services/users' import { pageModel } from './common' -import { config } from '../utils' +import { config } from 'utils' const { query } = usersService const { prefix } = config diff --git a/src/routes/UIElement/dataTable/index.js b/src/routes/UIElement/dataTable/index.js index d4eb9b1..a0d11df 100644 --- a/src/routes/UIElement/dataTable/index.js +++ b/src/routes/UIElement/dataTable/index.js @@ -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 { diff --git a/src/routes/UIElement/dropOption/index.js b/src/routes/UIElement/dropOption/index.js index f4bb50a..d76931b 100644 --- a/src/routes/UIElement/dropOption/index.js +++ b/src/routes/UIElement/dropOption/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { DropOption } from '../../../components' +import { DropOption } from 'components' import { Table, Row, Col, Card, message } from 'antd' const DropOptionPage = () =>
diff --git a/src/routes/UIElement/editor/index.js b/src/routes/UIElement/editor/index.js index 9102622..f95d48a 100644 --- a/src/routes/UIElement/editor/index.js +++ b/src/routes/UIElement/editor/index.js @@ -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' diff --git a/src/routes/UIElement/iconfont/index.js b/src/routes/UIElement/iconfont/index.js index e15ff0c..386f9a0 100644 --- a/src/routes/UIElement/iconfont/index.js +++ b/src/routes/UIElement/iconfont/index.js @@ -1,5 +1,5 @@ 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' diff --git a/src/routes/UIElement/layer/index.js b/src/routes/UIElement/layer/index.js index 6f4e5a6..9388ad2 100644 --- a/src/routes/UIElement/layer/index.js +++ b/src/routes/UIElement/layer/index.js @@ -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 = { diff --git a/src/routes/UIElement/search/index.js b/src/routes/UIElement/search/index.js index bce70b9..be78cf5 100644 --- a/src/routes/UIElement/search/index.js +++ b/src/routes/UIElement/search/index.js @@ -1,5 +1,5 @@ import React from 'react' -import { Search } from '../../../components' +import { Search } from 'components' import { Table, Row, Col, Card } from 'antd' const SearchPage = () =>
diff --git a/src/routes/app.js b/src/routes/app.js index a152549..8acdbea 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -1,8 +1,8 @@ import React from 'react' import PropTypes from 'prop-types' import { connect } from 'dva' -import { Layout } from '../components' -import { classnames, config, menu } from '../utils' +import { Layout } from 'components' +import { classnames, config, menu } from 'utils' import { Helmet } from 'react-helmet' import '../themes/index.less' import './app.less' diff --git a/src/routes/dashboard/components/browser.js b/src/routes/dashboard/components/browser.js index 6daeab9..75b9f67 100644 --- a/src/routes/dashboard/components/browser.js +++ b/src/routes/dashboard/components/browser.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Table, Tag } from 'antd' import styles from './browser.less' -import { color } from '../../../utils' +import { color } from 'utils' const status = { 1: { diff --git a/src/routes/dashboard/components/comments.js b/src/routes/dashboard/components/comments.js index dea3642..48eb645 100644 --- a/src/routes/dashboard/components/comments.js +++ b/src/routes/dashboard/components/comments.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Table, Tag } from 'antd' import styles from './comments.less' -import { color } from '../../../utils' +import { color } from 'utils' const status = { 1: { diff --git a/src/routes/dashboard/components/completed.js b/src/routes/dashboard/components/completed.js index 1eef236..e4ed206 100644 --- a/src/routes/dashboard/components/completed.js +++ b/src/routes/dashboard/components/completed.js @@ -2,7 +2,7 @@ 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' function Completed ({ data }) { diff --git a/src/routes/dashboard/components/cpu.js b/src/routes/dashboard/components/cpu.js index b6102ea..97fe3a2 100644 --- a/src/routes/dashboard/components/cpu.js +++ b/src/routes/dashboard/components/cpu.js @@ -1,7 +1,7 @@ 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' diff --git a/src/routes/dashboard/components/recentSales.js b/src/routes/dashboard/components/recentSales.js index cdbe213..496d6e7 100644 --- a/src/routes/dashboard/components/recentSales.js +++ b/src/routes/dashboard/components/recentSales.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { Table, Tag } from 'antd' import styles from './recentSales.less' -import { color } from '../../../utils' +import { color } from 'utils' const status = { 1: { diff --git a/src/routes/dashboard/components/sales.js b/src/routes/dashboard/components/sales.js index b761cc7..70b2609 100644 --- a/src/routes/dashboard/components/sales.js +++ b/src/routes/dashboard/components/sales.js @@ -2,7 +2,7 @@ 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' function Sales ({ data }) { diff --git a/src/routes/dashboard/components/user.js b/src/routes/dashboard/components/user.js index af483b5..59465f8 100644 --- a/src/routes/dashboard/components/user.js +++ b/src/routes/dashboard/components/user.js @@ -3,7 +3,7 @@ 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' const countUpProps = { start: 0, duration: 2.75, diff --git a/src/routes/dashboard/index.js b/src/routes/dashboard/index.js index eeee8e6..0df4193 100644 --- a/src/routes/dashboard/index.js +++ b/src/routes/dashboard/index.js @@ -4,7 +4,7 @@ import { connect } from 'dva' import { Row, Col, Card } from 'antd' import { NumberCard, Quote, Sales, Weather, RecentSales, Comments, Completed, Browser, Cpu, User } from './components' import styles from './index.less' -import { color } from '../../utils' +import { color } from 'utils' const bodyStyle = { bodyStyle: { diff --git a/src/routes/login/index.js b/src/routes/login/index.js index 546ada2..350dd2a 100644 --- a/src/routes/login/index.js +++ b/src/routes/login/index.js @@ -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 diff --git a/src/routes/request/index.js b/src/routes/request/index.js index 9f0a86d..8c94d54 100644 --- a/src/routes/request/index.js +++ b/src/routes/request/index.js @@ -1,7 +1,7 @@ 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, diff --git a/src/routes/user/Filter.js b/src/routes/user/Filter.js index 2658b46..6423cfe 100644 --- a/src/routes/user/Filter.js +++ b/src/routes/user/Filter.js @@ -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' diff --git a/src/routes/user/List.js b/src/routes/user/List.js index 71d4da7..a77925e 100644 --- a/src/routes/user/List.js +++ b/src/routes/user/List.js @@ -4,7 +4,7 @@ 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' const confirm = Modal.confirm diff --git a/src/services/app.js b/src/services/app.js index bce282f..588e6e9 100644 --- a/src/services/app.js +++ b/src/services/app.js @@ -1,4 +1,4 @@ -import { request, config } from '../utils' +import { request, config } from 'utils' const { api } = config const { user, userLogout, userLogin } = api diff --git a/src/services/dashboard.js b/src/services/dashboard.js index 7400977..41395a8 100644 --- a/src/services/dashboard.js +++ b/src/services/dashboard.js @@ -1,4 +1,4 @@ -import { request, config } from '../utils' +import { request, config } from 'utils' const { api } = config const { dashboard } = api diff --git a/src/services/login.js b/src/services/login.js index 540da24..3e7e89c 100644 --- a/src/services/login.js +++ b/src/services/login.js @@ -1,4 +1,4 @@ -import { request, config } from '../utils' +import { request, config } from 'utils' const { api } = config const { userLogin } = api diff --git a/src/services/posts.js b/src/services/posts.js index 584acbe..5a683f3 100644 --- a/src/services/posts.js +++ b/src/services/posts.js @@ -1,4 +1,4 @@ -import { request, config } from '../utils' +import { request, config } from 'utils' const { api } = config const { posts } = api diff --git a/src/services/user.js b/src/services/user.js index 2dca4e3..43ae74b 100644 --- a/src/services/user.js +++ b/src/services/user.js @@ -1,4 +1,4 @@ -import { request, config } from '../utils' +import { request, config } from 'utils' const { api } = config const { user } = api diff --git a/src/services/users.js b/src/services/users.js index def502d..47ceeb4 100644 --- a/src/services/users.js +++ b/src/services/users.js @@ -1,4 +1,4 @@ -import { request, config } from '../utils' +import { request, config } from 'utils' const { api } = config const { users } = api diff --git a/webpack.config.js b/webpack.config.js index cf144a2..ebf868b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -23,5 +23,13 @@ module.exports = (webpackConfig) => { // loader: 'eslint', // }] + + // Alias + webpackConfig.resolve.alias = { + components: `${__dirname}/src/components`, + utils: `${__dirname}/src/utils`, + config: `${__dirname}/src/utils/config`, + } + return webpackConfig } From 3a01626df93c9774dded6f167dfa278688aa6d17 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Tue, 4 Jul 2017 23:41:13 +0800 Subject: [PATCH 3/4] Permissions Simple Version --- src/components/Layout/Bread.js | 6 +- src/components/Layout/Menu.js | 10 +- src/mock/menu.js | 164 +++++++++++++++++++++++++++++++++ src/mock/user.js | 16 ++-- src/models/app.js | 38 ++++++-- src/routes/app.js | 4 +- src/services/menus.js | 11 +++ src/utils/config.js | 3 +- src/utils/request.js | 6 ++ 9 files changed, 236 insertions(+), 22 deletions(-) create mode 100644 src/mock/menu.js create mode 100644 src/services/menus.js diff --git a/src/components/Layout/Bread.js b/src/components/Layout/Bread.js index 75e74f2..21aa00f 100644 --- a/src/components/Layout/Bread.js +++ b/src/components/Layout/Bread.js @@ -25,7 +25,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', diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index 7ad8fe7..a6889e7 100644 --- a/src/components/Layout/Menu.js +++ b/src/components/Layout/Menu.js @@ -7,7 +7,7 @@ import pathToRegexp from 'path-to-regexp' const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys, changeOpenKeys, menu }) => { // 生成树状 - const menuTree = arrayToTree(menu.filter(_ => _.mpid !== -1), 'id', 'mpid') + const menuTree = arrayToTree(menu.filter(_ => _.mpid !== '-1'), 'id', 'mpid') const levelMap = {} // 递归生成菜单 @@ -22,7 +22,7 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys key={item.id} title={ {item.icon && } - {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name} + {(!siderFoldN || !menuTree.includes(item)) && item.name} } > {getMenus(item.children, siderFoldN)} @@ -33,7 +33,7 @@ const Menus = ({ siderFold, darkTheme, location, handleClickNavMenu, navOpenKeys {item.icon && } - {(!siderFoldN || menuTree.indexOf(item) < 0) && item.name} + {(!siderFoldN || !menuTree.includes(item)) && item.name} ) @@ -60,8 +60,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) diff --git a/src/mock/menu.js b/src/mock/menu.js new file mode 100644 index 0000000..c839d84 --- /dev/null +++ b/src/mock/menu.js @@ -0,0 +1,164 @@ +const { config, posts } = require('./common') + +const { apiPrefix } = config +let database = [ + { + id: '1', + icon: 'laptop', + name: 'Dashboard', + router: '/dashboard', + }, + { + id: '2', + bpid: '1', + name: 'Users', + icon: 'user', + router: '/user', + }, + { + id: '7', + bpid: '1', + name: 'Posts', + icon: 'shopping-cart', + router: '/post', + }, + { + 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', + }, +] + +module.exports = { + + [`GET ${apiPrefix}/menus`] (req, res) { + res.status(200).json(database) + }, +} diff --git a/src/mock/user.js b/src/mock/user.js index 8f31411..21f7d08 100644 --- a/src/mock/user.js +++ b/src/mock/user.js @@ -26,13 +26,15 @@ let usersListData = Mock.mock({ let database = usersListData.data 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'], + }, + ADMIN: { + visit: ['1', '2', '7', '21', '3', '4', '41', '42', '43', '44', '45', '46', '5', '51', '52', '53', '6', '61', '62', '621', '622'], + }, + DEVELOPER: { + visit: ['1', '2', '7', '21', '3', '4', '41', '42', '43', '44', '45', '46', '5', '51', '52', '53', '6', '61', '62', '621', '622'], + }, } const adminUsers = [ diff --git a/src/models/app.js b/src/models/app.js index 3ff0667..453f307 100644 --- a/src/models/app.js +++ b/src/models/app.js @@ -1,4 +1,5 @@ import { query, logout } from '../services/app' +import * as menusService from '../services/menus' import { routerRedux } from 'dva/router' import { parse } from 'qs' import { config } from 'utils' @@ -8,6 +9,17 @@ 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', @@ -33,11 +45,25 @@ export default { *query ({ payload, }, { call, put }) { - const data = yield call(query, parse(payload)) - if (data.success && data.user) { + const { success, user } = yield call(query, payload) + const { list } = yield call(menusService.query) + if (success && user) { + const { permissions } = user yield put({ - type: 'querySuccess', - payload: data.user, + type: 'updateState', + payload: { + user, + permissions, + 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(_ => _) + } + ), + }, }) if (location.pathname === '/login') { yield put(routerRedux.push('/dashboard')) @@ -76,10 +102,10 @@ export default { }, reducers: { - querySuccess (state, { payload: user }) { + updateState (state, { payload }) { return { ...state, - user, + ...payload, } }, diff --git a/src/routes/app.js b/src/routes/app.js index 8acdbea..e3f7e26 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -2,7 +2,7 @@ import React from 'react' import PropTypes from 'prop-types' import { connect } from 'dva' import { Layout } from 'components' -import { classnames, config, menu } from 'utils' +import { classnames, config } from 'utils' import { Helmet } from 'react-helmet' import '../themes/index.less' import './app.less' @@ -13,7 +13,7 @@ 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 { user, siderFold, darkTheme, isNavbar, menuPopoverVisible, navOpenKeys, menu } = app const href = window.location.href if (lastHref !== href) { diff --git a/src/services/menus.js b/src/services/menus.js new file mode 100644 index 0000000..eddd097 --- /dev/null +++ b/src/services/menus.js @@ -0,0 +1,11 @@ +import { request, config } from 'utils' +const { api } = config +const { menus } = api + +export async function query (params) { + return request({ + url: menus, + method: 'get', + data: params, + }) +} diff --git a/src/utils/config.js b/src/utils/config.js index cbf4c9c..9fee97e 100644 --- a/src/utils/config.js +++ b/src/utils/config.js @@ -9,7 +9,7 @@ module.exports = { iconFontCSS: '/iconfont.css', iconFontJS: '/iconfont.js', YQL: ['http://www.zuimeitianqi.com'], - CORS: ['http://localhost:7000'], + CORS: [], openPages: ['/login'], apiPrefix: '/api/v1', api: { @@ -20,6 +20,7 @@ module.exports = { posts: `${APIV1}/posts`, user: `${APIV1}/user/:id`, dashboard: `${APIV1}/dashboard`, + menus: `${APIV1}/menus`, v1test: `${APIV1}/test`, v2test: `${APIV2}/test`, }, diff --git a/src/utils/request.js b/src/utils/request.js index 8a8c853..7ffd2bd 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -89,6 +89,12 @@ 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, From 7f40ac6a603765322b1dc0f235a2ae0f7b809e90 Mon Sep 17 00:00:00 2001 From: zuiidea Date: Wed, 5 Jul 2017 13:54:57 +0800 Subject: [PATCH 4/4] Page Permission --- src/components/Layout/Menu.js | 3 +- src/components/Loader/Loader.js | 20 ++++++++++ src/components/Loader/Loader.less | 64 ++++++++++++++++++++++++++++++ src/components/Loader/package.json | 6 +++ src/components/index.js | 2 + src/models/app.js | 2 +- src/routes/app.js | 32 ++++++++------- 7 files changed, 112 insertions(+), 17 deletions(-) create mode 100644 src/components/Loader/Loader.js create mode 100644 src/components/Loader/Loader.less create mode 100644 src/components/Loader/package.json diff --git a/src/components/Layout/Menu.js b/src/components/Layout/Menu.js index a6889e7..121e2f4 100644 --- a/src/components/Layout/Menu.js +++ b/src/components/Layout/Menu.js @@ -5,7 +5,7 @@ import { Link } from 'dva/router' 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 levelMap = {} @@ -119,7 +119,6 @@ Menus.propTypes = { menu: PropTypes.array, siderFold: PropTypes.bool, darkTheme: PropTypes.bool, - location: PropTypes.object, isNavbar: PropTypes.bool, handleClickNavMenu: PropTypes.func, navOpenKeys: PropTypes.array, diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js new file mode 100644 index 0000000..fe24a19 --- /dev/null +++ b/src/components/Loader/Loader.js @@ -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 (
+
+
+
LOADING
+
+
) +} + + +Loader.propTypes = { + spinning: PropTypes.bool, +} + +export default Loader diff --git a/src/components/Loader/Loader.less b/src/components/Loader/Loader.less new file mode 100644 index 0000000..ba3685a --- /dev/null +++ b/src/components/Loader/Loader.less @@ -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); + } +} diff --git a/src/components/Loader/package.json b/src/components/Loader/package.json new file mode 100644 index 0000000..15bde9a --- /dev/null +++ b/src/components/Loader/package.json @@ -0,0 +1,6 @@ +{ + "name": "Loader", + "version": "0.0.0", + "private": true, + "main": "./Loader.js" +} diff --git a/src/components/index.js b/src/components/index.js index 8b04fb6..acc990e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -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, } diff --git a/src/models/app.js b/src/models/app.js index 453f307..5be1afe 100644 --- a/src/models/app.js +++ b/src/models/app.js @@ -46,8 +46,8 @@ export default { payload, }, { call, put }) { const { success, user } = yield call(query, payload) - const { list } = yield call(menusService.query) if (success && user) { + const { list } = yield call(menusService.query) const { permissions } = user yield put({ type: 'updateState', diff --git a/src/routes/app.js b/src/routes/app.js index e3f7e26..087c5bb 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -1,19 +1,26 @@ import React from 'react' import PropTypes from 'prop-types' +import pathToRegexp from 'path-to-regexp' import { connect } from 'dva' -import { Layout } from 'components' +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, menu } = 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.router || '').exec(pathname)) + const hasPermission = current.length ? permissions.visit.includes(current[0].id) : false const href = window.location.href if (lastHref !== href) { @@ -28,7 +35,6 @@ const App = ({ children, location, dispatch, app, loading }) => { menu, user, siderFold, - location, isNavbar, menuPopoverVisible, navOpenKeys, @@ -50,7 +56,6 @@ const App = ({ children, location, dispatch, app, loading }) => { menu, siderFold, darkTheme, - location, navOpenKeys, changeTheme () { dispatch({ type: 'app/switchTheme' }) @@ -64,13 +69,12 @@ const App = ({ children, location, dispatch, app, loading }) => { const breadProps = { menu, } - - if (config.openPages && config.openPages.indexOf(location.pathname) > -1) { - return
{children}
+ if (openPages && openPages.includes(pathname)) { + return (
+ + {children} +
) } - - const { iconFontJS, iconFontCSS, logo } = config - return (
@@ -86,10 +90,10 @@ const App = ({ children, location, dispatch, app, loading }) => { : ''}
- +
- {children} + {hasPermission ? children : }