parent
72283d1ffd
commit
e6429944e7
@ -0,0 +1,16 @@
|
||||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[Makefile]
|
||||
indent_style = tab
|
||||
@ -0,0 +1,7 @@
|
||||
src/**/*-test.js
|
||||
src/public
|
||||
src/routes/chart/ECharts/theme
|
||||
src/routes/chart/highCharts/mapdata
|
||||
src/locales/_build/
|
||||
src/locales/**/*.js
|
||||
docs/**/*.js
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"extends": "react-app",
|
||||
"rules": {
|
||||
"jsx-a11y/href-no-hash": "off",
|
||||
"no-console": "warn",
|
||||
"valid-jsdoc": "warn"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
coverage
|
||||
dist
|
||||
node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
yarn.lock
|
||||
package-lock.json
|
||||
|
||||
# ide
|
||||
.idea
|
||||
|
||||
# Mac General
|
||||
.DS_Store
|
||||
.AppleDouble
|
||||
.LSOverride
|
||||
|
||||
# umi
|
||||
.umi
|
||||
.umi-production
|
||||
|
||||
# jslingui
|
||||
src/locales/_build
|
||||
src/locales/**/*.js
|
||||
@ -0,0 +1,6 @@
|
||||
*.svg
|
||||
*.ejs
|
||||
.DS_Store
|
||||
.umi
|
||||
.umi-production
|
||||
src/locales/**/*.json
|
||||
@ -0,0 +1,5 @@
|
||||
{
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"extends": ["stylelint-config-standard", "stylelint-config-prettier"],
|
||||
"rules": {
|
||||
"declaration-empty-line-before": null,
|
||||
"no-descending-specificity": null,
|
||||
"selector-pseudo-class-no-unknown": null,
|
||||
"selector-pseudo-element-colon-notation": null
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
language: node_js
|
||||
node_js:
|
||||
- node
|
||||
script:
|
||||
- npm run build
|
||||
before_install:
|
||||
- yarn global add now
|
||||
after_script:
|
||||
- |
|
||||
if [[ $TRAVIS_BRANCH == 'master' ]]; then
|
||||
echo $PROD_SITE_NOW_CONFIG >> dist/vercel.json && echo $PROD_DOC_NOW_CONFIG >> docs/vercel.json;
|
||||
else
|
||||
echo $DEV_SITE_NOW_CONFIG >> dist/vercel.json && echo $DEV_DOC_NOW_CONFIG >> docs/vercel.json;
|
||||
fi
|
||||
- cd ./dist
|
||||
- now -A vercel.json -t $NOW_TOKEN --prod -c
|
||||
- cd ../docs
|
||||
- now -A vercel.json -t $NOW_TOKEN --prod -c
|
||||
@ -0,0 +1,135 @@
|
||||
// https://umijs.org/config/
|
||||
import { resolve } from 'path'
|
||||
const fs = require('fs')
|
||||
const path = require('path')
|
||||
const lessToJs = require('less-vars-to-js')
|
||||
const isDevelopment = process.env.NODE_ENV === 'development'
|
||||
|
||||
// how to speed compile: https://umijs.org/guide/boost-compile-speed
|
||||
export default {
|
||||
// IMPORTANT! change next line to yours or delete. And hide in dev
|
||||
publicPath: isDevelopment ? '/' : 'http://140.249.182.90:7000/',
|
||||
alias: {
|
||||
api: resolve(__dirname, './src/services/'),
|
||||
components: resolve(__dirname, './src/components'),
|
||||
config: resolve(__dirname, './src/utils/config'),
|
||||
themes: resolve(__dirname, './src/themes'),
|
||||
utils: resolve(__dirname, './src/utils'),
|
||||
},
|
||||
antd: {},
|
||||
// a lower cost way to genereate sourcemap, default is cheap-module-source-map, could save 60% time in dev hotload
|
||||
devtool: 'eval',
|
||||
dva: { immer: true },
|
||||
dynamicImport: {
|
||||
loading: 'components/Loader/Loader',
|
||||
},
|
||||
extraBabelPlugins: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'lodash',
|
||||
libraryDirectory: '',
|
||||
camel2DashComponentName: false,
|
||||
},
|
||||
'lodash',
|
||||
],
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: '@ant-design/icons',
|
||||
libraryDirectory: 'es/icons',
|
||||
camel2DashComponentName: false,
|
||||
},
|
||||
'ant-design-icons',
|
||||
],
|
||||
[
|
||||
'macros'
|
||||
]
|
||||
],
|
||||
hash: true,
|
||||
ignoreMomentLocale: true,
|
||||
// umi3 comple node_modules by default, could be disable
|
||||
nodeModulesTransform: {
|
||||
type: 'none',
|
||||
exclude: [],
|
||||
},
|
||||
// Webpack Configuration
|
||||
proxy: {
|
||||
'/api/v1/weather': {
|
||||
target: 'https://api.seniverse.com/',
|
||||
changeOrigin: true,
|
||||
pathRewrite: { '^/api/v1/weather': '/v3/weather' },
|
||||
},
|
||||
},
|
||||
// Theme for antd
|
||||
// https://ant.design/docs/react/customize-theme
|
||||
theme: lessToJs(
|
||||
fs.readFileSync(path.join(__dirname, './src/themes/default.less'), 'utf8')
|
||||
),
|
||||
webpack5: {},
|
||||
mfsu: {},
|
||||
chainWebpack: function (config, { webpack }) {
|
||||
!isDevelopment && config.merge({
|
||||
optimization: {
|
||||
minimize: false,
|
||||
splitChunks: {
|
||||
chunks: 'all',
|
||||
minSize: 30000,
|
||||
minChunks: 3,
|
||||
automaticNameDelimiter: '.',
|
||||
cacheGroups: {
|
||||
react: {
|
||||
name: 'react',
|
||||
priority: 20,
|
||||
test: /[\\/]node_modules[\\/](react|react-dom|react-dom-router)[\\/]/,
|
||||
},
|
||||
antd: {
|
||||
name: 'antd',
|
||||
priority: 20,
|
||||
test: /[\\/]node_modules[\\/](antd|@ant-design\/icons)[\\/]/,
|
||||
},
|
||||
'echarts-gl': {
|
||||
name: 'echarts-gl',
|
||||
priority: 30,
|
||||
test: /[\\/]node_modules[\\/]echarts-gl[\\/]/,
|
||||
},
|
||||
zrender: {
|
||||
name: 'zrender',
|
||||
priority: 30,
|
||||
test: /[\\/]node_modules[\\/]zrender[\\/]/,
|
||||
},
|
||||
echarts: {
|
||||
name: 'echarts',
|
||||
priority: 20,
|
||||
test: /[\\/]node_modules[\\/](echarts|echarts-for-react|echarts-liquidfill)[\\/]/,
|
||||
},
|
||||
highcharts: {
|
||||
name: 'highcharts',
|
||||
priority: 20,
|
||||
test: /[\\/]node_modules[\\/]highcharts[\\/]/,
|
||||
},
|
||||
recharts: {
|
||||
name: 'recharts',
|
||||
priority: 20,
|
||||
test: /[\\/]node_modules[\\/]recharts[\\/]/,
|
||||
},
|
||||
draftjs: {
|
||||
name: 'draftjs',
|
||||
priority: 30,
|
||||
test: /[\\/]node_modules[\\/](draft-js|react-draft-wysiwyg|draftjs-to-html|draftjs-to-markdown)[\\/]/,
|
||||
},
|
||||
async: {
|
||||
chunks: 'async',
|
||||
minChunks: 2,
|
||||
name: 'async',
|
||||
maxInitialRequests: 1,
|
||||
minSize: 0,
|
||||
priority: 5,
|
||||
reuseExistingChunk: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"json.schemas": [
|
||||
|
||||
],
|
||||
"js/ts.implicitProjectConfig.experimentalDecorators": true
|
||||
}
|
||||
@ -0,0 +1,22 @@
|
||||
MIT LICENSE
|
||||
|
||||
Copyright (c) 2016 zuiidea (zuiiidea@gmail.com)
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@ -0,0 +1,83 @@
|
||||
<p align="center">
|
||||
<a href="http://github.com/zuiidea/antd-admin">
|
||||
<img alt="antd-admin" height="64" src="./_media/logo.svg">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h1 align="center">AntD Admin</h1>
|
||||
|
||||
<div align="center">
|
||||
|
||||
An excellent front-end solution for enterprise applications.
|
||||
|
||||
[](https://github.com/ant-design/ant-design)
|
||||
[](https://github.com/umijs/umi)
|
||||
[](https://github.com/zuiidea/antd-admin/issues)
|
||||
[](http://opensource.org/licenses/MIT)
|
||||
|
||||
[](https://github.com/zuiidea/antd-admin/pulls)
|
||||
[](https://gitter.im/antd-admin/antd-admin)
|
||||
|
||||
</div>
|
||||
|
||||
- Preview - [https://antd-admin.zuiidea.com](https://antd-admin.zuiidea.com)
|
||||
- Documentation - [https://doc.antd-admin.zuiidea.com](https://doc.antd-admin.zuiidea.com)
|
||||
- FAQ - [https://doc.antd-admin.zuiidea.com/#/faq](https://doc.antd-admin.zuiidea.com/#/faq)
|
||||
- ChangeLog - [https://doc.antd-admin.zuiidea.com/#/change-log](https://doc.antd-admin.zuiidea.com/#/change-log)
|
||||
|
||||
## Features
|
||||
|
||||
- Internationalization, extracting translation fields from source code, loading language packs on demand
|
||||
- Dynamic permissions, different permissions for different menus
|
||||
- Elegant and beautiful, Ant Design system
|
||||
- Mock data, local data debugging
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
1. Clone project code.
|
||||
|
||||
```bash
|
||||
git clone https://github.com/zuiidea/antd-admin.git my-project
|
||||
cd my-project
|
||||
```
|
||||
|
||||
2. Installation dependence.
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
Or
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
3. Start local server.
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
```
|
||||
|
||||
4. After the startup is complete, open a browser and visit [http://localhost:7000](http://localhost:7000), If you need to change the startup port, you can configure it in the `.env` file.
|
||||
|
||||
|
||||
> More instructions at [documentation](https://doc.antd-admin.zuiidea.com)。
|
||||
|
||||
|
||||
## Browsers support
|
||||
|
||||
Modern browsers.
|
||||
|
||||
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera |
|
||||
| --------- | --------- | --------- | --------- | --------- |
|
||||
|IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
|
||||
|
||||
## Contributing
|
||||
|
||||
We very much welcome your contribution, you can build together with us in the following ways :smiley:
|
||||
|
||||
- Use Ant Design Pro in your daily work.
|
||||
- Submit [GitHub issues](http://github.com/zuiidea/antd-admin/issues)s to report bugs or ask questions.
|
||||
- Propose [Pull Request](http://github.com/zuiidea/antd-admin/pulls) to improve our code.
|
||||
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 194 KiB |
|
After Width: | Height: | Size: 118 KiB |
|
After Width: | Height: | Size: 199 KiB |
|
After Width: | Height: | Size: 124 KiB |
@ -0,0 +1,12 @@
|
||||
- Getting started
|
||||
- [Quick Start](getting-started.md)
|
||||
- Customization
|
||||
- [Configuration](configuration.md)
|
||||
- [API Configuration](API-configuration.md)
|
||||
- [I18n](i18n.md)
|
||||
- [Layout](layout.md)
|
||||
- [Request](request.md)
|
||||
- Guide
|
||||
- [Deploy](deploy.md)
|
||||
- [Change Log](change-log.md)
|
||||
- [FAQ](faq.md)
|
||||
@ -0,0 +1,9 @@
|
||||
# FAQ
|
||||
|
||||
Most asked
|
||||
|
||||
## create new page
|
||||
|
||||
1. just copy a page in /src/pages (route here auto generated by [umi](https://umijs.org/guide/router.html#basic-routing))
|
||||
2. modify namespace/pathToRegexp in model.js
|
||||
3. modify mock route.js to add a route
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>antd-admin - An admin dashboard application demo built upon Ant Design and UmiJS</title>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
<meta name="description" content="An admin dashboard application demo built upon Ant Design and UmiJS">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
|
||||
<link rel="icon" href="/_media/favicon.ico" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav data-cloak class="app-nav">
|
||||
<a href="/">En</a>
|
||||
<a href="#/zh-cn/">中文</a>
|
||||
</nav>
|
||||
<div id="app">Loading...</div>
|
||||
<script>
|
||||
window.$docsify = {
|
||||
name: 'AntD Admin',
|
||||
loadSidebar: true,
|
||||
maxLevel: 3,
|
||||
subMaxLevel: 3,
|
||||
auto2top: true,
|
||||
autoHeader: true,
|
||||
repo: 'zuiidea/antd-admin',
|
||||
themeColor: '#1890ff',
|
||||
search: {
|
||||
paths: 'auto',
|
||||
placeholder: {
|
||||
'/zh-cn/': '搜索',
|
||||
'/': 'Type to search'
|
||||
},
|
||||
|
||||
noData: {
|
||||
'/zh-cn/': '找不到结果',
|
||||
'/': 'No Results'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// if (typeof navigator.serviceWorker !== 'undefined') {
|
||||
// navigator.serviceWorker.register('sw.js')
|
||||
// }
|
||||
</script>
|
||||
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/emoji.min.js"></script>
|
||||
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.min.js"></script>
|
||||
<script src="//unpkg.com/docsify-copy-code"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,22 @@
|
||||
# HTTP request
|
||||
|
||||
this project use axios for http service, file located in src/utils/request.js
|
||||
|
||||
## Custom Header
|
||||
|
||||
As for privilege access or modify cookie, you could add header param by yourself
|
||||
|
||||
```
|
||||
axios.defaults.headers.common['Authorization'] = 'token'
|
||||
```
|
||||
|
||||
Or
|
||||
|
||||
```
|
||||
axios.interceptors.request.use(function (config) {
|
||||
config.headers.token = window.localStorage.getItem('token');
|
||||
return config;
|
||||
}, function (error) {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
```
|
||||
@ -0,0 +1,11 @@
|
||||
- 入门
|
||||
- [快速上手](zh-cn/getting-started.md)
|
||||
- 定制化
|
||||
- [配置项](zh-cn/configuration.md)
|
||||
- [接口配置](zh-cn/API-configuration.md)
|
||||
- [国际化](zh-cn/i18n.md)
|
||||
- [布局](zh-cn/layout.md)
|
||||
- [http 请求](zh-cn/request.md)
|
||||
- 指南
|
||||
- [部署](zh-cn/deploy.md)
|
||||
- [更新日志](zh-cn/change-log.md)
|
||||
@ -0,0 +1,52 @@
|
||||
## 5.0.0
|
||||
|
||||
#### 优化
|
||||
|
||||
- 尽量使用修饰器，简化代码编写，提高代码可读性。
|
||||
|
||||
- API 配置化，简化获取数据方式。
|
||||
|
||||
- `utils` 内文件拆分，各司其职。
|
||||
|
||||
- 简化`utils/request`文件，不做特殊处理。
|
||||
|
||||
#### 规范
|
||||
|
||||
- 函数添加描述、参数、返回值等注释，含糊不清的代码增加注释，规范参考 [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html#appendices-jsdoc-tag-reference)。
|
||||
|
||||
- 语义化版本号，规范参加 [语义化版本 2.0.0](https://semver.org/lang/zh-CN/)。
|
||||
|
||||
- 静态代码检查，统一代码风格，代码提交前将会使用 `prettier`、`stylelint`、`eslint` 规范代码。
|
||||
|
||||
- Git 提交信息规范化，[git-commit-emoji-cn](https://github.com/liuchengxu/git-commit-emoji-cn)。
|
||||
|
||||
- 基于 `Umi` 的约定式路由，无需再写路由配置文件。
|
||||
|
||||
- 使用 `React 16` 新特性，如 `Fragment`、`Context`、 `PureComponent`等。
|
||||
|
||||
#### 功能
|
||||
|
||||
- 支持国际化，源码中抽离翻译字段，按需加载语言包，自动在线翻译。
|
||||
|
||||
- 支持按需引入 `lodash` 函数。
|
||||
|
||||
- 支持多布局，可根据规则规定哪些路由使用哪种布局。
|
||||
|
||||
- 支持 Antd Admin 在 Travis 上自动编译和部署。
|
||||
|
||||
- 使用 `Docsify` 生成文档网站。
|
||||
|
||||
|
||||
#### 样式
|
||||
|
||||
- 新增 Antd Admin 独立 Logo。
|
||||
|
||||
- 重写整体布局组件，优化菜单、面包屑导航自动高亮，菜单自动展开等逻辑。
|
||||
|
||||
- 移动端菜单更改为抽屉式。
|
||||
|
||||
#### 其他
|
||||
|
||||
- 废弃 `IconFont`、 `Search`、`DataTable`等组件，因为在 `Antd` 中有很好的支持和可替代的。
|
||||
|
||||
|
||||
@ -0,0 +1,7 @@
|
||||
# 问题集锦
|
||||
|
||||
## 新建页面
|
||||
|
||||
1. 直接从/src/pages复制一个page (会自动创建路由[umi](https://umijs.org/zh/guide/router.html#%E7%BA%A6%E5%AE%9A%E5%BC%8F%E8%B7%AF%E7%94%B1))
|
||||
2. 修改 namespace/pathToRegexp 在 model.js
|
||||
3. 修改 mock中route.js增加一条route
|
||||
@ -0,0 +1,73 @@
|
||||
# 快速上手
|
||||
|
||||
> 在开始之前，推荐先学习 [React](http://facebook.github.io/react/) 、 [ES2015+](http://es6.ruanyifeng.com/) 、 [Antd Design](https://ant.design/docs/react/introduce-cn) , 了解 [UmiJS](https://umijs.org/) 、[Dva](http://github.com/dvajs/dva) ，并正确安装和配置了 [Node.js](https://nodejs.org/) v8 或以上 、[Git](https://git-scm.com/)。提前了解和学习这些知识会非常有帮助。
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
git clone https://github.com/zuiidea/antd-admin.git my-project
|
||||
cd my-project
|
||||
```
|
||||
|
||||
## 目录结构
|
||||
|
||||
应用的目录结构如下
|
||||
|
||||
```bash
|
||||
├── dist/ # 默认build输出目录
|
||||
├── mock/ # Mock文件目录
|
||||
├── public/ # 静态资源文件目录
|
||||
├── src/ # 源码目录
|
||||
│ ├── components/ # 组件目录
|
||||
│ ├── e2e/ # e2e目录
|
||||
│ ├── layouts/ # 布局目录
|
||||
│ ├── locales/ # 国际化文件目录
|
||||
│ ├── models/ # 数据模型目录
|
||||
│ ├── pages/ # 页面组件目录
|
||||
│ ├── services/ # 数据接口目录
|
||||
│ │ ├── api.js # 接口配置
|
||||
│ │ └── index.js # 接口输出
|
||||
│ ├── themes/ # 项目样式目录
|
||||
│ │ ├── default.less # 样式变量
|
||||
│ │ ├── index.less # 全局样式
|
||||
│ │ ├── mixin.less # 样式函数
|
||||
│ │ └── vars.less # 样式变量及函数
|
||||
│ ├── utils/ # 工具函数目录
|
||||
│ │ ├── config.js # 项目配置
|
||||
│ │ ├── constant.js # 静态常量
|
||||
│ │ ├── index.js # 工具函数
|
||||
│ │ ├── request.js # 异步请求函数(axios)
|
||||
│ │ └── theme.js # 项目需要在js中使用到样式变量
|
||||
├── .editorconfig # 编辑器配置
|
||||
├── .env # 环境变量
|
||||
├── .eslintrc # ESlint配置
|
||||
├── .gitignore # Git忽略文件配置
|
||||
├── .prettierignore # Prettier忽略文件配置
|
||||
├── .prettierrc # Prettier配置
|
||||
├── .stylelintrc.json # Stylelint配置
|
||||
├── .travis.yml # Travis配置
|
||||
└── .umirc.js # Umi配置
|
||||
└── package.json # 项目信息
|
||||
```
|
||||
|
||||
## 本地开发
|
||||
|
||||
1. 进入目录安装依赖，国内用户推荐使用 [cnpm](https://cnpmjs.org) 进行加速
|
||||
|
||||
```bash
|
||||
yarn install
|
||||
```
|
||||
|
||||
或者
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. 启动本地服务器
|
||||
|
||||
```bash
|
||||
npm run start
|
||||
```
|
||||
|
||||
3. 启动完成后打开浏览器访问 [http://localhost:7000](http://localhost:7000)，如果需要更改启动端口，可在 `.env` 文件中配置。
|
||||
@ -0,0 +1,60 @@
|
||||
# 布局
|
||||
|
||||
## 新增布局
|
||||
|
||||
以新增名为 `secondary` 的布局为例，使以 `secondary` 开头的路由都使用该布局。
|
||||
|
||||
1. 在 `src/utils/config.js` 新增相关配置，参数详细请查看 [layouts](/zh-cn/configuration?id=layouts)。
|
||||
|
||||
```javascript
|
||||
layouts: [
|
||||
{
|
||||
name: 'primary',
|
||||
include: [/.*/],
|
||||
exclude: [/(\/(en|zh))*\/login/, /(\/(en|zh))*\/secondary\/(.*)/],
|
||||
},
|
||||
{
|
||||
name: 'secondary',
|
||||
include: [/(\/(en|zh))*\/secondary\/(.*)/],
|
||||
},
|
||||
],
|
||||
```
|
||||
|
||||
2. 在`src/layouts/BaseLayout.js` 文件中新增 `secondary` 布局组件。
|
||||
|
||||
```javascript
|
||||
import SecondaryLayout from './SecondaryLayout'
|
||||
|
||||
const LayoutMap = {
|
||||
primary: PrimaryLayout,
|
||||
public: PublicLayout,
|
||||
secondary: SecondaryLayout,
|
||||
}
|
||||
```
|
||||
|
||||
3. 在`src/layouts/` 目录中新增 `SecondaryLayout.js` 文件。
|
||||
|
||||
```javascript
|
||||
import React from 'react'
|
||||
|
||||
export default ({ children }) => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Secondary</h1>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
4. 在`src/pages/` 目录中新增 `secondary/index.js` 文件。
|
||||
|
||||
```javascript
|
||||
import React from 'react'
|
||||
|
||||
export default ({ children }) => {
|
||||
return <div>Secondary page Content</div>
|
||||
}
|
||||
```
|
||||
|
||||
5. 最后，启动开发模式 `npm run start`，打开 [http://localhost:7000/secondary/](http://localhost:7000/secondary/)，你将看到 `secondary` 布局的页面。
|
||||
@ -0,0 +1,5 @@
|
||||
# 路由
|
||||
|
||||
本项目中采用约定式路由
|
||||
|
||||
参考[umi 路由](https://umijs.org/zh/guide/router.html)
|
||||
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
testURL: 'http://localhost:8000',
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "Antd-Admin",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#fff",
|
||||
"description": "A front-end solution for enterprise applications built upon Ant Design and UmiJS",
|
||||
"icons": [{
|
||||
"src": "logo/logo@96.png",
|
||||
"sizes": "72x72"
|
||||
},
|
||||
{
|
||||
"src": "logo/logo@128.png",
|
||||
"sizes": "128x128"
|
||||
},
|
||||
{
|
||||
"src": "logo/logo@144.png",
|
||||
"sizes": "144x144"
|
||||
},
|
||||
{
|
||||
"src": "logo/logo@152.png",
|
||||
"sizes": "152x152"
|
||||
},
|
||||
{
|
||||
"src": "logo/logo@192.png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo/logo@384.png",
|
||||
"sizes": "384x384"
|
||||
},
|
||||
{
|
||||
"src": "logo/logo@512.png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
/**
|
||||
* Query objects that specify keys and values in an array where all values are objects.
|
||||
* @param {array} array An array where all values are objects, like [{key:1},{key:2}].
|
||||
* @param {string} key The key of the object that needs to be queried.
|
||||
* @param {string} value The value of the object that needs to be queried.
|
||||
* @return {object|undefined} Return frist object when query success.
|
||||
*/
|
||||
export function queryArray(array, key, value) {
|
||||
if (!Array.isArray(array)) {
|
||||
return
|
||||
}
|
||||
return array.filter(_ => _[key] === value)
|
||||
}
|
||||
|
||||
export function randomNumber(min, max) {
|
||||
return Math.floor(Math.random() * (max - min) + min)
|
||||
}
|
||||
|
||||
export function randomAvatar() {
|
||||
const avatarList = [
|
||||
'photo-1549492864-2ec7d66ffb04.jpeg',
|
||||
'photo-1480535339474-e083439a320d.jpeg',
|
||||
'photo-1523419409543-a5e549c1faa8.jpeg',
|
||||
'photo-1519648023493-d82b5f8d7b8a.jpeg',
|
||||
'photo-1523307730650-594bc63f9d67.jpeg',
|
||||
'photo-1522962506050-a2f0267e4895.jpeg',
|
||||
'photo-1489779162738-f81aed9b0a25.jpeg',
|
||||
'photo-1534308143481-c55f00be8bd7.jpeg',
|
||||
'photo-1519336555923-59661f41bb45.jpeg',
|
||||
'photo-1551438632-e8c7d9a5d1b7.jpeg',
|
||||
'photo-1525879000488-bff3b1c387cf.jpeg',
|
||||
'photo-1487412720507-e7ab37603c6f.jpeg',
|
||||
'photo-1510227272981-87123e259b17.jpeg'
|
||||
]
|
||||
return `//image.zuiidea.com/${avatarList[randomNumber(0, avatarList.length - 1)]}?imageView2/1/w/200/h/200/format/webp/q/75|imageslim`
|
||||
}
|
||||
|
||||
export const Constant = {
|
||||
ApiPrefix: '/api/v1',
|
||||
NotFound: {
|
||||
message: 'Not Found',
|
||||
documentation_url: '',
|
||||
},
|
||||
Color: {
|
||||
green: '#64ea91',
|
||||
blue: '#8fc9fb',
|
||||
purple: '#d897eb',
|
||||
red: '#f69899',
|
||||
yellow: '#f8c82e',
|
||||
peach: '#f797d6',
|
||||
borderBase: '#e5e5e5',
|
||||
borderSplit: '#f4f4f4',
|
||||
grass: '#d6fbb5',
|
||||
sky: '#c1e0fc',
|
||||
},
|
||||
}
|
||||
|
||||
export Mock from 'mockjs'
|
||||
export qs from 'qs'
|
||||
@ -0,0 +1,142 @@
|
||||
import { Mock, Constant } from './_utils'
|
||||
|
||||
const { ApiPrefix, Color } = Constant
|
||||
|
||||
const Dashboard = Mock.mock({
|
||||
'sales|8': [
|
||||
{
|
||||
'name|+1': 2008,
|
||||
'Clothes|200-500': 1,
|
||||
'Food|180-400': 1,
|
||||
'Electronics|300-550': 1,
|
||||
},
|
||||
],
|
||||
cpu: {
|
||||
'usage|50-600': 1,
|
||||
space: 825,
|
||||
'cpu|40-90': 1,
|
||||
'data|20': [
|
||||
{
|
||||
'cpu|20-80': 1,
|
||||
},
|
||||
],
|
||||
},
|
||||
browser: [
|
||||
{
|
||||
name: 'Google Chrome',
|
||||
percent: 43.3,
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
name: 'Mozilla Firefox',
|
||||
percent: 33.4,
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
name: 'Apple Safari',
|
||||
percent: 34.6,
|
||||
status: 3,
|
||||
},
|
||||
{
|
||||
name: 'Internet Explorer',
|
||||
percent: 12.3,
|
||||
status: 4,
|
||||
},
|
||||
{
|
||||
name: 'Opera Mini',
|
||||
percent: 3.3,
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
name: 'Chromium',
|
||||
percent: 2.53,
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
user: {
|
||||
name: 'github',
|
||||
sales: 3241,
|
||||
sold: 3556,
|
||||
},
|
||||
'completed|12': [
|
||||
{
|
||||
'name|+1': 2008,
|
||||
'Task complete|200-1000': 1,
|
||||
'Cards Complete|200-1000': 1,
|
||||
},
|
||||
],
|
||||
'comments|5': [
|
||||
{
|
||||
name: '@last',
|
||||
'status|1-3': 1,
|
||||
content: '@sentence',
|
||||
avatar() {
|
||||
return Mock.Random.image(
|
||||
'48x48',
|
||||
Mock.Random.color(),
|
||||
'#757575',
|
||||
'png',
|
||||
this.name.substr(0, 1)
|
||||
)
|
||||
},
|
||||
date() {
|
||||
return `2016-${Mock.Random.date('MM-dd')} ${Mock.Random.time(
|
||||
'HH:mm:ss'
|
||||
)}`
|
||||
},
|
||||
},
|
||||
],
|
||||
'recentSales|36': [
|
||||
{
|
||||
'id|+1': 1,
|
||||
name: '@last',
|
||||
'status|1-4': 1,
|
||||
date() {
|
||||
return `${Mock.Random.integer(2015, 2016)}-${Mock.Random.date(
|
||||
'MM-dd'
|
||||
)} ${Mock.Random.time('HH:mm:ss')}`
|
||||
},
|
||||
'price|10-200.1-2': 1,
|
||||
},
|
||||
],
|
||||
quote: {
|
||||
name: 'Joho Doe',
|
||||
title: 'Graphic Designer',
|
||||
content:
|
||||
"I'm selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can't handle me at my worst, then you sure as hell don't deserve me at my best.",
|
||||
avatar:
|
||||
'//cdn.antd-admin.zuiidea.com/bc442cf0cc6f7940dcc567e465048d1a8d634493198c4-sPx5BR_fw236',
|
||||
},
|
||||
numbers: [
|
||||
{
|
||||
icon: 'pay-circle-o',
|
||||
color: Color.green,
|
||||
title: 'Online Review',
|
||||
number: 2781,
|
||||
},
|
||||
{
|
||||
icon: 'team',
|
||||
color: Color.blue,
|
||||
title: 'New Customers',
|
||||
number: 3241,
|
||||
},
|
||||
{
|
||||
icon: 'message',
|
||||
color: Color.purple,
|
||||
title: 'Active Projects',
|
||||
number: 253,
|
||||
},
|
||||
{
|
||||
icon: 'shopping-cart',
|
||||
color: Color.red,
|
||||
title: 'Referrals',
|
||||
number: 4324,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
module.exports = {
|
||||
[`GET ${ApiPrefix}/dashboard`](req, res) {
|
||||
res.json(Dashboard)
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,67 @@
|
||||
import { Mock, Constant } from './_utils'
|
||||
|
||||
const { ApiPrefix } = Constant
|
||||
|
||||
let postId = 0
|
||||
const database = 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 = {
|
||||
[`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,
|
||||
})
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,155 @@
|
||||
import { Constant } from './_utils'
|
||||
const { ApiPrefix } = Constant
|
||||
|
||||
const database = [
|
||||
{
|
||||
id: '1',
|
||||
icon: 'dashboard',
|
||||
name: 'Dashboard',
|
||||
zh: {
|
||||
name: '仪表盘'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Dashboard'
|
||||
},
|
||||
route: '/dashboard',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'Users',
|
||||
zh: {
|
||||
name: '用户管理'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Usuário'
|
||||
},
|
||||
icon: 'user',
|
||||
route: '/user',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'Posts',
|
||||
zh: {
|
||||
name: '用户管理'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Posts'
|
||||
},
|
||||
icon: 'shopping-cart',
|
||||
route: '/post',
|
||||
},
|
||||
{
|
||||
id: '21',
|
||||
menuParentId: '-1',
|
||||
breadcrumbParentId: '2',
|
||||
name: 'User Detail',
|
||||
zh: {
|
||||
name: '用户详情'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Detalhes do usuário'
|
||||
},
|
||||
route: '/user/:id',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'Request',
|
||||
zh: {
|
||||
name: 'Request'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Requisição'
|
||||
},
|
||||
icon: 'api',
|
||||
route: '/request',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'UI Element',
|
||||
zh: {
|
||||
name: 'UI组件'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Elementos UI'
|
||||
},
|
||||
icon: 'camera-o',
|
||||
},
|
||||
{
|
||||
id: '45',
|
||||
breadcrumbParentId: '4',
|
||||
menuParentId: '4',
|
||||
name: 'Editor',
|
||||
zh: {
|
||||
name: 'Editor'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Editor'
|
||||
},
|
||||
icon: 'edit',
|
||||
route: '/editor',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
breadcrumbParentId: '1',
|
||||
name: 'Charts',
|
||||
zh: {
|
||||
name: 'Charts'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Graficos'
|
||||
},
|
||||
icon: 'code-o',
|
||||
},
|
||||
{
|
||||
id: '51',
|
||||
breadcrumbParentId: '5',
|
||||
menuParentId: '5',
|
||||
name: 'ECharts',
|
||||
zh: {
|
||||
name: 'ECharts'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'ECharts'
|
||||
},
|
||||
icon: 'line-chart',
|
||||
route: '/chart/ECharts',
|
||||
},
|
||||
{
|
||||
id: '52',
|
||||
breadcrumbParentId: '5',
|
||||
menuParentId: '5',
|
||||
name: 'HighCharts',
|
||||
zh: {
|
||||
name: 'HighCharts'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'HighCharts'
|
||||
},
|
||||
icon: 'bar-chart',
|
||||
route: '/chart/highCharts',
|
||||
},
|
||||
{
|
||||
id: '53',
|
||||
breadcrumbParentId: '5',
|
||||
menuParentId: '5',
|
||||
name: 'Rechartst',
|
||||
zh: {
|
||||
name: 'Rechartst'
|
||||
},
|
||||
'pt-br': {
|
||||
name: 'Rechartst'
|
||||
},
|
||||
icon: 'area-chart',
|
||||
route: '/chart/Recharts',
|
||||
},
|
||||
]
|
||||
|
||||
module.exports = {
|
||||
[`GET ${ApiPrefix}/routes`](req, res) {
|
||||
res.status(200).json(database)
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,250 @@
|
||||
import { Mock, Constant, randomAvatar } from './_utils'
|
||||
import qs from 'qs'
|
||||
|
||||
const { ApiPrefix } = Constant
|
||||
|
||||
let usersListData = Mock.mock({
|
||||
'data|80-100': [
|
||||
{
|
||||
id: '@id',
|
||||
name: '@name',
|
||||
nickName: '@last',
|
||||
phone: /^1[34578]\d{9}$/,
|
||||
'age|11-99': 1,
|
||||
address: '@county(true)',
|
||||
isMale: '@boolean',
|
||||
email: '@email',
|
||||
createTime: '@datetime',
|
||||
avatar() {
|
||||
return randomAvatar()
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
let database = usersListData.data
|
||||
|
||||
const EnumRoleType = {
|
||||
ADMIN: 'admin',
|
||||
DEFAULT: 'guest',
|
||||
DEVELOPER: 'developer',
|
||||
}
|
||||
|
||||
const userPermission = {
|
||||
DEFAULT: {
|
||||
visit: ['1', '2', '21', '7', '5', '51', '52', '53'],
|
||||
role: EnumRoleType.DEFAULT,
|
||||
},
|
||||
ADMIN: {
|
||||
role: EnumRoleType.ADMIN,
|
||||
},
|
||||
DEVELOPER: {
|
||||
role: EnumRoleType.DEVELOPER,
|
||||
},
|
||||
}
|
||||
|
||||
const adminUsers = [
|
||||
{
|
||||
id: 0,
|
||||
username: 'admin',
|
||||
password: 'admin',
|
||||
permissions: userPermission.ADMIN,
|
||||
avatar: randomAvatar(),
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
username: 'guest',
|
||||
password: 'guest',
|
||||
permissions: userPermission.DEFAULT,
|
||||
avatar: randomAvatar(),
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
username: '吴彦祖',
|
||||
password: '123456',
|
||||
permissions: userPermission.DEVELOPER,
|
||||
avatar: randomAvatar(),
|
||||
},
|
||||
]
|
||||
|
||||
const queryArray = (array, key, keyAlias = 'key') => {
|
||||
if (!(array instanceof Array)) {
|
||||
return null
|
||||
}
|
||||
let data
|
||||
|
||||
for (let 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',
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
[`POST ${ApiPrefix}/user/login`](req, res) {
|
||||
const { username, password } = req.body
|
||||
const user = adminUsers.filter(item => item.username === username)
|
||||
|
||||
if (user.length > 0 && user[0].password === password) {
|
||||
const now = new Date()
|
||||
now.setDate(now.getDate() + 1)
|
||||
res.cookie(
|
||||
'token',
|
||||
JSON.stringify({ id: user[0].id, deadline: now.getTime() }),
|
||||
{
|
||||
maxAge: 900000,
|
||||
httpOnly: true,
|
||||
}
|
||||
)
|
||||
res.json({ success: true, message: 'Ok' })
|
||||
} else {
|
||||
res.status(400).end()
|
||||
}
|
||||
},
|
||||
|
||||
[`GET ${ApiPrefix}/user/logout`](req, res) {
|
||||
res.clearCookie('token')
|
||||
res.status(200).end()
|
||||
},
|
||||
|
||||
[`GET ${ApiPrefix}/user`](req, res) {
|
||||
const cookie = req.headers.cookie || ''
|
||||
const cookies = qs.parse(cookie.replace(/\s/g, ''), { delimiter: ';' })
|
||||
const response = {}
|
||||
let user = {}
|
||||
if (!cookies.token) {
|
||||
res.status(200).send({ message: 'Not Login' })
|
||||
return
|
||||
}
|
||||
const token = JSON.parse(cookies.token)
|
||||
if (token) {
|
||||
response.success = token.deadline > new Date().getTime()
|
||||
}
|
||||
if (response.success) {
|
||||
const userItem = adminUsers.find(_ => _.id === token.id)
|
||||
if (userItem) {
|
||||
const { password, ...other } = userItem
|
||||
user = other
|
||||
}
|
||||
}
|
||||
response.user = user
|
||||
res.json(response)
|
||||
},
|
||||
|
||||
[`GET ${ApiPrefix}/users`](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)) {
|
||||
if (key === 'address') {
|
||||
return other[key].every(iitem => item[key].indexOf(iitem) > -1)
|
||||
} else if (key === 'createTime') {
|
||||
const start = new Date(other[key][0]).getTime()
|
||||
const end = new Date(other[key][1]).getTime()
|
||||
const now = new Date(item[key]).getTime()
|
||||
|
||||
if (start && end) {
|
||||
return now >= start && now <= end
|
||||
}
|
||||
return true
|
||||
}
|
||||
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,
|
||||
})
|
||||
},
|
||||
|
||||
[`POST ${ApiPrefix}/users/delete`](req, res) {
|
||||
const { ids=[] } = req.body
|
||||
database = database.filter(item => !ids.some(_ => _ === item.id))
|
||||
res.status(204).end()
|
||||
},
|
||||
|
||||
[`POST ${ApiPrefix}/user`](req, res) {
|
||||
const newData = req.body
|
||||
newData.createTime = Mock.mock('@now')
|
||||
newData.avatar =
|
||||
newData.avatar ||
|
||||
Mock.Random.image(
|
||||
'100x100',
|
||||
Mock.Random.color(),
|
||||
'#757575',
|
||||
'png',
|
||||
newData.nickName.substr(0, 1)
|
||||
)
|
||||
newData.id = Mock.mock('@id')
|
||||
|
||||
database.unshift(newData)
|
||||
|
||||
res.status(200).end()
|
||||
},
|
||||
|
||||
[`GET ${ApiPrefix}/user/:id`](req, res) {
|
||||
const { id } = req.params
|
||||
const data = queryArray(database, id, 'id')
|
||||
if (data) {
|
||||
res.status(200).json(data)
|
||||
} else {
|
||||
res.status(200).json(NOTFOUND)
|
||||
}
|
||||
},
|
||||
|
||||
[`DELETE ${ApiPrefix}/user/:id`](req, res) {
|
||||
const { id } = req.params
|
||||
const data = queryArray(database, id, 'id')
|
||||
if (data) {
|
||||
database = database.filter(item => item.id !== id)
|
||||
res.status(204).end()
|
||||
} else {
|
||||
res.status(200).json(NOTFOUND)
|
||||
}
|
||||
},
|
||||
|
||||
[`PATCH ${ApiPrefix}/user/:id`](req, res) {
|
||||
const { id } = req.params
|
||||
const editItem = req.body
|
||||
let isExist = false
|
||||
|
||||
database = database.map(item => {
|
||||
if (item.id === id) {
|
||||
isExist = true
|
||||
return Object.assign({}, item, editItem)
|
||||
}
|
||||
return item
|
||||
})
|
||||
|
||||
if (isExist) {
|
||||
res.status(201).end()
|
||||
} else {
|
||||
res.status(200).json(NOTFOUND)
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,129 @@
|
||||
{
|
||||
"name": "antd-admin",
|
||||
"version": "5.3.0",
|
||||
"license": "MIT",
|
||||
"description": "An admin dashboard application demo built upon Ant Design and UmiJS",
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^4.6.2",
|
||||
"@lingui/react": "^3.8.0",
|
||||
"antd": "^4.0.0",
|
||||
"axios": "^0.21.0",
|
||||
"classnames": "^2.2.6",
|
||||
"d3-shape": "^2.1.0",
|
||||
"draft-js": "^0.11.7",
|
||||
"draftjs-to-html": "^0.9.0",
|
||||
"draftjs-to-markdown": "^0.6.0",
|
||||
"dva-model-extend": "^0.1.2",
|
||||
"echarts": "^5.0.0",
|
||||
"echarts-for-react": "^3.0.0",
|
||||
"echarts-gl": "^2.0.2",
|
||||
"echarts-liquidfill": "^3.0.0",
|
||||
"enquire-js": "^0.2.1",
|
||||
"highcharts-exporting": "^0.1.7",
|
||||
"highcharts-more": "^0.1.7",
|
||||
"json-format": "^1.0.1",
|
||||
"lodash": "^4.17.11",
|
||||
"md5": "^2.2.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-to-regexp": "^6.1.0",
|
||||
"prop-types": "^15.7.0",
|
||||
"qs": "^6.10.0",
|
||||
"react-adsense": "^0.1.0",
|
||||
"react-countup": "^4.2.0",
|
||||
"react-draft-wysiwyg": "^1.13.0",
|
||||
"react-helmet": "^6.0.0",
|
||||
"react-highcharts": "^16.1.0",
|
||||
"react-perfect-scrollbar": "^1.5.0",
|
||||
"recharts": "^2.0.0",
|
||||
"store": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-react": "^7.12.13",
|
||||
"@lingui/cli": "^3.8.0",
|
||||
"@lingui/macro": "^3.8.0",
|
||||
"@umijs/preset-react": "^1.8.0",
|
||||
"babel-eslint": "^10.0.0",
|
||||
"babel-plugin-dev-expression": "^0.2.0",
|
||||
"babel-plugin-import": "^1.13.0",
|
||||
"babel-plugin-macros": "^3.0.0",
|
||||
"babel-plugin-module-resolver": "^4.0.0",
|
||||
"cross-env": "^7.0.0",
|
||||
"eslint": "^7.0.0",
|
||||
"eslint-config-react-app": "^6.0.0",
|
||||
"eslint-plugin-flowtype": "^5.1.0",
|
||||
"eslint-plugin-import": "^2.18.0",
|
||||
"eslint-plugin-jsx-a11y": "^6.2.1",
|
||||
"eslint-plugin-react": "^7.23.0",
|
||||
"eslint-plugin-react-hooks": "^4.0.0",
|
||||
"husky": "^4.2.0",
|
||||
"less-vars-to-js": "^1.3.0",
|
||||
"lint-staged": "^10.0.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"module": "^1.2.5",
|
||||
"prettier": "^2.0.0",
|
||||
"stylelint": "^13.2.0",
|
||||
"stylelint-config-prettier": "^8.0.0",
|
||||
"stylelint-config-standard": "^21.0.0",
|
||||
"typescript": "^4.2.3",
|
||||
"umi": "^3.4.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 10.0.0"
|
||||
},
|
||||
"lint-staged": {
|
||||
"src/**/*.js": [
|
||||
"eslint --ext .js --fix",
|
||||
"npm run prettier",
|
||||
"git add"
|
||||
],
|
||||
"**/*.less": [
|
||||
"stylelint --syntax less",
|
||||
"npm run prettier",
|
||||
"git add"
|
||||
]
|
||||
},
|
||||
"lingui": {
|
||||
"fallbackLocales": {
|
||||
"default": "en"
|
||||
},
|
||||
"sourceLocale": "en",
|
||||
"locales": [
|
||||
"en",
|
||||
"zh",
|
||||
"pt-br"
|
||||
],
|
||||
"catalogs": [
|
||||
{
|
||||
"path": "src/locales/{locale}/messages",
|
||||
"include": [
|
||||
"src/pages",
|
||||
"src/layouts",
|
||||
"src/components",
|
||||
"src/layouts"
|
||||
]
|
||||
}
|
||||
],
|
||||
"format": "minimal",
|
||||
"extractBabelOptions": {
|
||||
"presets": [
|
||||
"@umijs/babel-preset-umi",
|
||||
"@babel/preset-react"
|
||||
]
|
||||
}
|
||||
},
|
||||
"scripts": {
|
||||
"analyze": "cross-env ANALYZE=1 umi build",
|
||||
"build": "umi build",
|
||||
"check:model": "umi dva list model",
|
||||
"lint:js": "eslint --ext .js src",
|
||||
"lint:style": "stylelint \"src/**/*.less\" --syntax less",
|
||||
"start": "umi dev",
|
||||
"test": "cross-env BABELRC=none umi test",
|
||||
"prettier": "prettier --write 'src/**/*.{js,less}'",
|
||||
"precommit": "lint-staged",
|
||||
"add-locale": "lingui add-locale",
|
||||
"extract": "lingui extract",
|
||||
"trans": "lingui extract --clean && node ./scripts/translate.js",
|
||||
"doc": "docsify serve docs"
|
||||
}
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 4.7 KiB |
|
After Width: | Height: | Size: 9.7 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 973 B |
@ -0,0 +1,35 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { BarsOutlined, DownOutlined } from '@ant-design/icons'
|
||||
import { Dropdown, Button, Menu } from 'antd'
|
||||
|
||||
const DropOption = ({
|
||||
onMenuClick,
|
||||
menuOptions = [],
|
||||
buttonStyle,
|
||||
dropdownProps,
|
||||
}) => {
|
||||
const menu = menuOptions.map(item => (
|
||||
<Menu.Item key={item.key}>{item.name}</Menu.Item>
|
||||
))
|
||||
return (
|
||||
<Dropdown
|
||||
overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
|
||||
{...dropdownProps}
|
||||
>
|
||||
<Button style={{ border: 'none', ...buttonStyle }}>
|
||||
<BarsOutlined style={{ marginRight: 2 }} />
|
||||
<DownOutlined />
|
||||
</Button>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
|
||||
DropOption.propTypes = {
|
||||
onMenuClick: PropTypes.func,
|
||||
menuOptions: PropTypes.array.isRequired,
|
||||
buttonStyle: PropTypes.object,
|
||||
dropdownProps: PropTypes.object,
|
||||
}
|
||||
|
||||
export default DropOption
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "DropOption",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./DropOption.js"
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
import React from 'react'
|
||||
import { Editor } from 'react-draft-wysiwyg'
|
||||
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
|
||||
import styles from './Editor.less'
|
||||
|
||||
const DraftEditor = props => {
|
||||
return (
|
||||
<Editor
|
||||
toolbarClassName={styles.toolbar}
|
||||
wrapperClassName={styles.wrapper}
|
||||
editorClassName={styles.editor}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default DraftEditor
|
||||
@ -0,0 +1,106 @@
|
||||
.wrapper {
|
||||
height: 500px;
|
||||
|
||||
:global {
|
||||
.rdw-dropdownoption-default {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.rdw-dropdown-optionwrapper {
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
border-radius: 0 0 2px 2px;
|
||||
&:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rdw-inline-wrapper {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0;
|
||||
|
||||
.rdw-option-wrapper {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.rdw-option-active {
|
||||
box-shadow: 1px 1px 0 #e8e8e8 inset;
|
||||
}
|
||||
|
||||
.rdw-colorpicker-option {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.rdw-colorpicker-modal,
|
||||
.rdw-embedded-modal,
|
||||
.rdw-emoji-modal,
|
||||
.rdw-image-modal,
|
||||
.rdw-link-modal {
|
||||
box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.rdw-colorpicker-modal,
|
||||
.rdw-embedded-modal,
|
||||
.rdw-link-modal {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.rdw-emoji-modal {
|
||||
width: 214px;
|
||||
}
|
||||
|
||||
.rdw-colorpicker-modal {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.rdw-embedded-modal-btn,
|
||||
.rdw-image-modal-btn,
|
||||
.rdw-link-modal-btn {
|
||||
height: 32px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.rdw-embedded-modal-input,
|
||||
.rdw-embedded-modal-size-input,
|
||||
.rdw-link-modal-input {
|
||||
padding: 2px 6px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.rdw-dropdown-selectedtext {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.rdw-dropdown-wrapper,
|
||||
.rdw-option-wrapper {
|
||||
min-width: 36px;
|
||||
transition: all 0.2s ease;
|
||||
height: 30px;
|
||||
|
||||
&:active {
|
||||
box-shadow: 1px 1px 0 #e8e8e8 inset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: 1px 1px 0 #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
.rdw-dropdown-wrapper {
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.rdw-editor-main {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
.editor {
|
||||
border: 1px solid #f1f1f1;
|
||||
padding: 5px;
|
||||
border-radius: 2px;
|
||||
height: auto;
|
||||
min-height: 200px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "Editor",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Editor.js"
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { TooltipProps } from 'antd/lib/tooltip';
|
||||
|
||||
export interface EllipsisTooltipProps extends TooltipProps {
|
||||
title?: undefined;
|
||||
overlayStyle?: undefined;
|
||||
}
|
||||
|
||||
export interface EllipsisProps {
|
||||
tooltip?: boolean | EllipsisTooltipProps;
|
||||
length?: number;
|
||||
lines?: number;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
fullWidthRecognition?: boolean;
|
||||
}
|
||||
|
||||
export function getStrFullLength(str: string): number;
|
||||
export function cutStrByFullLength(str: string, maxLength: number): string;
|
||||
|
||||
export default class Ellipsis extends React.Component<EllipsisProps, any> {}
|
||||
@ -0,0 +1,270 @@
|
||||
import React, { Component } from 'react';
|
||||
import { Tooltip } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import styles from './index.less';
|
||||
|
||||
/* eslint react/no-did-mount-set-state: 0 */
|
||||
/* eslint no-param-reassign: 0 */
|
||||
|
||||
const isSupportLineClamp = document.body.style.webkitLineClamp !== undefined;
|
||||
|
||||
const TooltipOverlayStyle = {
|
||||
overflowWrap: 'break-word',
|
||||
wordWrap: 'break-word',
|
||||
};
|
||||
|
||||
export const getStrFullLength = (str = '') =>
|
||||
str.split('').reduce((pre, cur) => {
|
||||
const charCode = cur.charCodeAt(0);
|
||||
if (charCode >= 0 && charCode <= 128) {
|
||||
return pre + 1;
|
||||
}
|
||||
return pre + 2;
|
||||
}, 0);
|
||||
|
||||
export const cutStrByFullLength = (str = '', maxLength) => {
|
||||
let showLength = 0;
|
||||
return str.split('').reduce((pre, cur) => {
|
||||
const charCode = cur.charCodeAt(0);
|
||||
if (charCode >= 0 && charCode <= 128) {
|
||||
showLength += 1;
|
||||
} else {
|
||||
showLength += 2;
|
||||
}
|
||||
if (showLength <= maxLength) {
|
||||
return pre + cur;
|
||||
}
|
||||
return pre;
|
||||
}, '');
|
||||
};
|
||||
|
||||
const getTooltip = ({ tooltip, overlayStyle, title, children }) => {
|
||||
if (tooltip) {
|
||||
const props = tooltip === true ? { overlayStyle, title } : { ...tooltip, overlayStyle, title };
|
||||
return <Tooltip {...props}>{children}</Tooltip>;
|
||||
}
|
||||
return children;
|
||||
};
|
||||
|
||||
const EllipsisText = ({ text, length, tooltip, fullWidthRecognition, ...other }) => {
|
||||
if (typeof text !== 'string') {
|
||||
throw new Error('Ellipsis children must be string.');
|
||||
}
|
||||
const textLength = fullWidthRecognition ? getStrFullLength(text) : text.length;
|
||||
if (textLength <= length || length < 0) {
|
||||
return <span {...other}>{text}</span>;
|
||||
}
|
||||
const tail = '...';
|
||||
let displayText;
|
||||
if (length - tail.length <= 0) {
|
||||
displayText = '';
|
||||
} else {
|
||||
displayText = fullWidthRecognition ? cutStrByFullLength(text, length) : text.slice(0, length);
|
||||
}
|
||||
|
||||
const spanAttrs = tooltip ? {} : { ...other };
|
||||
return getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: text,
|
||||
children: (
|
||||
<span {...spanAttrs}>
|
||||
{displayText}
|
||||
{tail}
|
||||
</span>
|
||||
),
|
||||
});
|
||||
};
|
||||
|
||||
export default class Ellipsis extends Component {
|
||||
state = {
|
||||
text: '',
|
||||
targetCount: 0,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (this.node) {
|
||||
this.computeLine();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidUpdate(perProps) {
|
||||
const { lines } = this.props;
|
||||
if (lines !== perProps.lines) {
|
||||
this.computeLine();
|
||||
}
|
||||
}
|
||||
|
||||
computeLine = () => {
|
||||
const { lines } = this.props;
|
||||
if (lines && !isSupportLineClamp) {
|
||||
const text = this.shadowChildren.innerText || this.shadowChildren.textContent;
|
||||
const lineHeight = parseInt(getComputedStyle(this.root).lineHeight, 10);
|
||||
const targetHeight = lines * lineHeight;
|
||||
this.content.style.height = `${targetHeight}px`;
|
||||
const totalHeight = this.shadowChildren.offsetHeight;
|
||||
const shadowNode = this.shadow.firstChild;
|
||||
|
||||
if (totalHeight <= targetHeight) {
|
||||
this.setState({
|
||||
text,
|
||||
targetCount: text.length,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// bisection
|
||||
const len = text.length;
|
||||
const mid = Math.ceil(len / 2);
|
||||
|
||||
const count = this.bisection(targetHeight, mid, 0, len, text, shadowNode);
|
||||
|
||||
this.setState({
|
||||
text,
|
||||
targetCount: count,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
bisection = (th, m, b, e, text, shadowNode) => {
|
||||
const suffix = '...';
|
||||
let mid = m;
|
||||
let end = e;
|
||||
let begin = b;
|
||||
shadowNode.innerHTML = text.substring(0, mid) + suffix;
|
||||
let sh = shadowNode.offsetHeight;
|
||||
|
||||
if (sh <= th) {
|
||||
shadowNode.innerHTML = text.substring(0, mid + 1) + suffix;
|
||||
sh = shadowNode.offsetHeight;
|
||||
if (sh > th || mid === begin) {
|
||||
return mid;
|
||||
}
|
||||
begin = mid;
|
||||
if (end - begin === 1) {
|
||||
mid = 1 + begin;
|
||||
} else {
|
||||
mid = Math.floor((end - begin) / 2) + begin;
|
||||
}
|
||||
return this.bisection(th, mid, begin, end, text, shadowNode);
|
||||
}
|
||||
if (mid - 1 < 0) {
|
||||
return mid;
|
||||
}
|
||||
shadowNode.innerHTML = text.substring(0, mid - 1) + suffix;
|
||||
sh = shadowNode.offsetHeight;
|
||||
if (sh <= th) {
|
||||
return mid - 1;
|
||||
}
|
||||
end = mid;
|
||||
mid = Math.floor((end - begin) / 2) + begin;
|
||||
return this.bisection(th, mid, begin, end, text, shadowNode);
|
||||
};
|
||||
|
||||
handleRoot = n => {
|
||||
this.root = n;
|
||||
};
|
||||
|
||||
handleContent = n => {
|
||||
this.content = n;
|
||||
};
|
||||
|
||||
handleNode = n => {
|
||||
this.node = n;
|
||||
};
|
||||
|
||||
handleShadow = n => {
|
||||
this.shadow = n;
|
||||
};
|
||||
|
||||
handleShadowChildren = n => {
|
||||
this.shadowChildren = n;
|
||||
};
|
||||
|
||||
render() {
|
||||
const { text, targetCount } = this.state;
|
||||
const {
|
||||
children,
|
||||
lines,
|
||||
length,
|
||||
className,
|
||||
tooltip,
|
||||
fullWidthRecognition,
|
||||
...restProps
|
||||
} = this.props;
|
||||
|
||||
const cls = classNames(styles.ellipsis, className, {
|
||||
[styles.lines]: lines && !isSupportLineClamp,
|
||||
[styles.lineClamp]: lines && isSupportLineClamp,
|
||||
});
|
||||
|
||||
if (!lines && !length) {
|
||||
return (
|
||||
<span className={cls} {...restProps}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// length
|
||||
if (!lines) {
|
||||
return (
|
||||
<EllipsisText
|
||||
className={cls}
|
||||
length={length}
|
||||
text={children || ''}
|
||||
tooltip={tooltip}
|
||||
fullWidthRecognition={fullWidthRecognition}
|
||||
{...restProps}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const id = `antd-pro-ellipsis-${`${new Date().getTime()}${Math.floor(Math.random() * 100)}`}`;
|
||||
|
||||
// support document.body.style.webkitLineClamp
|
||||
if (isSupportLineClamp) {
|
||||
const style = `#${id}{-webkit-line-clamp:${lines};-webkit-box-orient: vertical;}`;
|
||||
|
||||
const node = (
|
||||
<div id={id} className={cls} {...restProps}>
|
||||
<style>{style}</style>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
return getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: children,
|
||||
children: node,
|
||||
});
|
||||
}
|
||||
|
||||
const childNode = (
|
||||
<span ref={this.handleNode}>
|
||||
{targetCount > 0 && text.substring(0, targetCount)}
|
||||
{targetCount > 0 && targetCount < text.length && '...'}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div {...restProps} ref={this.handleRoot} className={cls}>
|
||||
<div ref={this.handleContent}>
|
||||
{getTooltip({
|
||||
tooltip,
|
||||
overlayStyle: TooltipOverlayStyle,
|
||||
title: text,
|
||||
children: childNode,
|
||||
})}
|
||||
<div className={styles.shadow} ref={this.handleShadowChildren}>
|
||||
{children}
|
||||
</div>
|
||||
<div className={styles.shadow} ref={this.handleShadow}>
|
||||
<span>{text}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,24 @@
|
||||
.ellipsis {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.lines {
|
||||
position: relative;
|
||||
.shadow {
|
||||
position: absolute;
|
||||
z-index: -999;
|
||||
display: block;
|
||||
color: transparent;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.lineClamp {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
---
|
||||
title: Ellipsis
|
||||
subtitle: 文本自动省略号
|
||||
cols: 1
|
||||
order: 10
|
||||
---
|
||||
|
||||
文本过长自动处理省略号，支持按照文本长度和最大行数两种方式截取。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ------------------------------------------------ | ------- | ------ |
|
||||
| tooltip | 移动到文本展示完整内容的提示 | boolean | - |
|
||||
| length | 在按照长度截取下的文本最大字符数，超过则截取省略 | number | - |
|
||||
| lines | 在按照行数截取下最大的行数，超过则截取省略 | number | `1` |
|
||||
| fullWidthRecognition | 是否将全角字符的长度视为 2 来计算字符串长度 | boolean | - |
|
||||
@ -0,0 +1,28 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './FilterItem.less'
|
||||
|
||||
const FilterItem = ({ label = '', children }) => {
|
||||
const labelArray = label.split('')
|
||||
return (
|
||||
<div className={styles.filterItem}>
|
||||
{labelArray.length > 0 && (
|
||||
<div className={styles.labelWrap}>
|
||||
{labelArray.map((item, index) => (
|
||||
<span className="labelText" key={index}>
|
||||
{item}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.item}>{children}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
FilterItem.propTypes = {
|
||||
label: PropTypes.string,
|
||||
children: PropTypes.element.isRequired,
|
||||
}
|
||||
|
||||
export default FilterItem
|
||||
@ -0,0 +1,17 @@
|
||||
.filterItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.labelWrap {
|
||||
width: 80px;
|
||||
line-height: 28px;
|
||||
margin-right: 12px;
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "FilterItem",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./FilterItem.js"
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
import React from 'react';
|
||||
export interface GlobalFooterProps {
|
||||
links?: Array<{
|
||||
key?: string;
|
||||
title: React.ReactNode;
|
||||
href: string;
|
||||
blankTarget?: boolean;
|
||||
}>;
|
||||
copyright?: React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default class GlobalFooter extends React.Component<GlobalFooterProps, any> {}
|
||||
@ -0,0 +1,28 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import styles from './index.less';
|
||||
|
||||
const GlobalFooter = ({ className, links, copyright }) => {
|
||||
const clsString = classNames(styles.globalFooter, className);
|
||||
return (
|
||||
<footer className={clsString}>
|
||||
{links && (
|
||||
<div className={styles.links}>
|
||||
{links.map(link => (
|
||||
<a
|
||||
key={link.key}
|
||||
title={link.key}
|
||||
target={link.blankTarget ? '_blank' : '_self'}
|
||||
href={link.href}
|
||||
>
|
||||
{link.title}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{copyright && <div className={styles.copyright}>{copyright}</div>}
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default GlobalFooter;
|
||||
@ -0,0 +1,29 @@
|
||||
@import '~antd/lib/style/themes/default.less';
|
||||
|
||||
.globalFooter {
|
||||
margin: 48px 0 24px 0;
|
||||
padding: 0 16px;
|
||||
text-align: center;
|
||||
|
||||
.links {
|
||||
margin-bottom: 8px;
|
||||
|
||||
a {
|
||||
color: @text-color-secondary;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 40px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
color: @text-color-secondary;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: GlobalFooter
|
||||
subtitle: 全局页脚
|
||||
cols: 1
|
||||
order: 7
|
||||
---
|
||||
|
||||
页脚属于全局导航的一部分，作为对顶部导航的补充，通过传递数据控制展示内容。
|
||||
|
||||
## API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | -------- | ---------------------------------------------------------------- | ------ |
|
||||
| links | 链接数据 | array<{ title: ReactNode, href: string, blankTarget?: boolean }> | - |
|
||||
| copyright | 版权信息 | ReactNode | - |
|
||||
@ -0,0 +1,68 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Breadcrumb } from 'antd'
|
||||
import { Link, withRouter } from 'umi'
|
||||
import { t } from "@lingui/macro"
|
||||
import iconMap from 'utils/iconMap'
|
||||
const { pathToRegexp } = require('path-to-regexp')
|
||||
import { queryAncestors } from 'utils'
|
||||
import styles from './Bread.less'
|
||||
|
||||
@withRouter
|
||||
class Bread extends PureComponent {
|
||||
generateBreadcrumbs = (paths) => {
|
||||
return paths.map((item, key) => {
|
||||
const content = item && (
|
||||
<Fragment>
|
||||
{item.icon && (
|
||||
<span style={{ marginRight: 4 }}>{iconMap[item.icon]}</span>
|
||||
)}
|
||||
{item.name}
|
||||
</Fragment>
|
||||
)
|
||||
|
||||
return (
|
||||
item && (
|
||||
<Breadcrumb.Item key={key}>
|
||||
{paths.length - 1 !== key ? (
|
||||
<Link to={item.route || '#'}>{content}</Link>
|
||||
) : (
|
||||
content
|
||||
)}
|
||||
</Breadcrumb.Item>
|
||||
)
|
||||
)
|
||||
})
|
||||
}
|
||||
render() {
|
||||
const { routeList, location } = this.props
|
||||
|
||||
// Find a route that matches the pathname.
|
||||
const currentRoute = routeList.find(
|
||||
(_) => _.route && pathToRegexp(_.route).exec(location.pathname)
|
||||
)
|
||||
|
||||
// Find the breadcrumb navigation of the current route match and all its ancestors.
|
||||
const paths = currentRoute
|
||||
? queryAncestors(routeList, currentRoute, 'breadcrumbParentId').reverse()
|
||||
: [
|
||||
routeList[0],
|
||||
{
|
||||
id: 404,
|
||||
name: t`Not Found`,
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<Breadcrumb className={styles.bread}>
|
||||
{this.generateBreadcrumbs(paths)}
|
||||
</Breadcrumb>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Bread.propTypes = {
|
||||
routeList: PropTypes.array,
|
||||
}
|
||||
|
||||
export default Bread
|
||||
@ -0,0 +1,16 @@
|
||||
.bread {
|
||||
margin-bottom: 24px;
|
||||
|
||||
:global {
|
||||
.ant-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.bread {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,169 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Menu, Layout, Avatar, Popover, Badge, List } from 'antd'
|
||||
import { Ellipsis } from 'components'
|
||||
import {
|
||||
BellOutlined,
|
||||
RightOutlined,
|
||||
MenuFoldOutlined,
|
||||
MenuUnfoldOutlined,
|
||||
} from '@ant-design/icons'
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { getLocale, setLocale } from 'utils'
|
||||
import moment from 'moment'
|
||||
import classnames from 'classnames'
|
||||
import config from 'config'
|
||||
import styles from './Header.less'
|
||||
|
||||
const { SubMenu } = Menu
|
||||
|
||||
class Header extends PureComponent {
|
||||
handleClickMenu = e => {
|
||||
e.key === 'SignOut' && this.props.onSignOut()
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
fixed,
|
||||
avatar,
|
||||
username,
|
||||
collapsed,
|
||||
notifications,
|
||||
onCollapseChange,
|
||||
onAllNotificationsRead,
|
||||
} = this.props
|
||||
|
||||
const rightContent = [
|
||||
<Menu key="user" mode="horizontal" onClick={this.handleClickMenu}>
|
||||
<SubMenu
|
||||
title={
|
||||
<Fragment>
|
||||
<span style={{ color: '#999', marginRight: 4 }}>
|
||||
<Trans>Hi,</Trans>
|
||||
</span>
|
||||
<span>{username}</span>
|
||||
<Avatar style={{ marginLeft: 8 }} src={avatar} />
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
<Menu.Item key="SignOut">
|
||||
<Trans>Sign out</Trans>
|
||||
</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>,
|
||||
]
|
||||
|
||||
if (config.i18n) {
|
||||
const { languages } = config.i18n
|
||||
const language = getLocale()
|
||||
const currentLanguage = languages.find(
|
||||
item => item.key === language
|
||||
)
|
||||
|
||||
rightContent.unshift(
|
||||
<Menu
|
||||
key="language"
|
||||
selectedKeys={[currentLanguage.key]}
|
||||
onClick={data => {
|
||||
setLocale(data.key)
|
||||
}}
|
||||
mode="horizontal"
|
||||
>
|
||||
<SubMenu title={<Avatar size="small" src={currentLanguage.flag} />}>
|
||||
{languages.map(item => (
|
||||
<Menu.Item key={item.key}>
|
||||
<Avatar
|
||||
size="small"
|
||||
style={{ marginRight: 8 }}
|
||||
src={item.flag}
|
||||
/>
|
||||
{item.title}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
|
||||
rightContent.unshift(
|
||||
<Popover
|
||||
placement="bottomRight"
|
||||
trigger="click"
|
||||
key="notifications"
|
||||
overlayClassName={styles.notificationPopover}
|
||||
getPopupContainer={() => document.querySelector('#primaryLayout')}
|
||||
content={
|
||||
<div className={styles.notification}>
|
||||
<List
|
||||
itemLayout="horizontal"
|
||||
dataSource={notifications}
|
||||
locale={{
|
||||
emptyText: <Trans>You have viewed all notifications.</Trans>,
|
||||
}}
|
||||
renderItem={item => (
|
||||
<List.Item className={styles.notificationItem}>
|
||||
<List.Item.Meta
|
||||
title={
|
||||
<Ellipsis tooltip lines={1}>
|
||||
{item.title}
|
||||
</Ellipsis>
|
||||
}
|
||||
description={moment(item.date).fromNow()}
|
||||
/>
|
||||
<RightOutlined style={{ fontSize: 10, color: '#ccc' }} />
|
||||
</List.Item>
|
||||
)}
|
||||
/>
|
||||
{notifications.length ? (
|
||||
<div
|
||||
onClick={onAllNotificationsRead}
|
||||
className={styles.clearButton}
|
||||
>
|
||||
<Trans>Clear notifications</Trans>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Badge
|
||||
count={notifications.length}
|
||||
dot
|
||||
offset={[-10, 10]}
|
||||
className={styles.iconButton}
|
||||
>
|
||||
<BellOutlined className={styles.iconFont} />
|
||||
</Badge>
|
||||
</Popover>
|
||||
)
|
||||
|
||||
return (
|
||||
<Layout.Header
|
||||
className={classnames(styles.header, {
|
||||
[styles.fixed]: fixed,
|
||||
[styles.collapsed]: collapsed,
|
||||
})}
|
||||
id="layoutHeader"
|
||||
>
|
||||
<div
|
||||
className={styles.button}
|
||||
onClick={onCollapseChange.bind(this, !collapsed)}
|
||||
>
|
||||
{collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
||||
</div>
|
||||
<div className={styles.rightContainer}>{rightContent}</div>
|
||||
</Layout.Header>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Header.propTypes = {
|
||||
fixed: PropTypes.bool,
|
||||
user: PropTypes.object,
|
||||
menus: PropTypes.array,
|
||||
collapsed: PropTypes.bool,
|
||||
onSignOut: PropTypes.func,
|
||||
notifications: PropTypes.array,
|
||||
onCollapseChange: PropTypes.func,
|
||||
onAllNotificationsRead: PropTypes.func,
|
||||
}
|
||||
|
||||
export default Header
|
||||
@ -0,0 +1,154 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
.header {
|
||||
padding: 0;
|
||||
box-shadow: @shadow-2;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 72px;
|
||||
z-index: 9;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: ~'calc(100% - 256px)';
|
||||
z-index: 29;
|
||||
transition: width 0.2s;
|
||||
|
||||
&.collapsed {
|
||||
width: ~'calc(100% - 80px)';
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-menu-submenu-title {
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal {
|
||||
line-height: 72px;
|
||||
|
||||
& > .ant-menu-submenu:hover {
|
||||
color: @primary-color;
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu {
|
||||
border-bottom: none;
|
||||
height: 72px;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-submenu {
|
||||
top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-item,
|
||||
.ant-menu-horizontal > .ant-menu-submenu {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal > .ant-menu-item-active,
|
||||
.ant-menu-horizontal > .ant-menu-item-open,
|
||||
.ant-menu-horizontal > .ant-menu-item-selected,
|
||||
.ant-menu-horizontal > .ant-menu-item:hover,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-active,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-open,
|
||||
.ant-menu-horizontal > .ant-menu-submenu-selected,
|
||||
.ant-menu-horizontal > .ant-menu-submenu:hover {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rightContainer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
line-height: 72px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: @transition-ease-in;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.iconButton {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 24px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
|
||||
&:hover {
|
||||
.iconFont {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
& + .iconButton {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.iconFont {
|
||||
color: #b2b0c7;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.notification {
|
||||
padding: 24px 0;
|
||||
width: 320px;
|
||||
.notificationItem {
|
||||
transition: all 0.3s;
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: @hover-color;
|
||||
}
|
||||
}
|
||||
.clearButton {
|
||||
text-align: center;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
cursor: pointer;
|
||||
.background-hover();
|
||||
}
|
||||
}
|
||||
|
||||
.notificationPopover {
|
||||
:global {
|
||||
.ant-popover-inner-content {
|
||||
padding: 0;
|
||||
}
|
||||
.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
.ant-list-item-content {
|
||||
flex: 0;
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.header {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,122 @@
|
||||
import React, { PureComponent, Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Menu } from 'antd'
|
||||
import { NavLink, withRouter } from 'umi'
|
||||
import { pathToRegexp } from 'path-to-regexp'
|
||||
import { arrayToTree, queryAncestors } from 'utils'
|
||||
import iconMap from 'utils/iconMap'
|
||||
import store from 'store'
|
||||
|
||||
const { SubMenu } = Menu
|
||||
|
||||
@withRouter
|
||||
class SiderMenu extends PureComponent {
|
||||
state = {
|
||||
openKeys: store.get('openKeys') || [],
|
||||
}
|
||||
|
||||
onOpenChange = openKeys => {
|
||||
const { menus } = this.props
|
||||
const rootSubmenuKeys = menus.filter(_ => !_.menuParentId).map(_ => _.id)
|
||||
|
||||
const latestOpenKey = openKeys.find(
|
||||
key => this.state.openKeys.indexOf(key) === -1
|
||||
)
|
||||
|
||||
let newOpenKeys = openKeys
|
||||
if (rootSubmenuKeys.indexOf(latestOpenKey) !== -1) {
|
||||
newOpenKeys = latestOpenKey ? [latestOpenKey] : []
|
||||
}
|
||||
|
||||
this.setState({
|
||||
openKeys: newOpenKeys,
|
||||
})
|
||||
store.set('openKeys', newOpenKeys)
|
||||
}
|
||||
|
||||
generateMenus = data => {
|
||||
return data.map(item => {
|
||||
if (item.children) {
|
||||
return (
|
||||
<SubMenu
|
||||
key={item.id}
|
||||
title={
|
||||
<Fragment>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</Fragment>
|
||||
}
|
||||
>
|
||||
{this.generateMenus(item.children)}
|
||||
</SubMenu>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<Menu.Item key={item.id}>
|
||||
<NavLink to={item.route || '#'}>
|
||||
{item.icon && iconMap[item.icon]}
|
||||
<span>{item.name}</span>
|
||||
</NavLink>
|
||||
</Menu.Item>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
collapsed,
|
||||
theme,
|
||||
menus,
|
||||
location,
|
||||
isMobile,
|
||||
onCollapseChange,
|
||||
} = this.props
|
||||
|
||||
// Generating tree-structured data for menu content.
|
||||
const menuTree = arrayToTree(menus, 'id', 'menuParentId')
|
||||
|
||||
// Find a menu that matches the pathname.
|
||||
const currentMenu = menus.find(
|
||||
_ => _.route && pathToRegexp(_.route).exec(location.pathname)
|
||||
)
|
||||
|
||||
// Find the key that should be selected according to the current menu.
|
||||
const selectedKeys = currentMenu
|
||||
? queryAncestors(menus, currentMenu, 'menuParentId').map(_ => _.id)
|
||||
: []
|
||||
|
||||
const menuProps = collapsed
|
||||
? {}
|
||||
: {
|
||||
openKeys: this.state.openKeys,
|
||||
}
|
||||
|
||||
return (
|
||||
<Menu
|
||||
mode="inline"
|
||||
theme={theme}
|
||||
onOpenChange={this.onOpenChange}
|
||||
selectedKeys={selectedKeys}
|
||||
onClick={
|
||||
isMobile
|
||||
? () => {
|
||||
onCollapseChange(true)
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
{...menuProps}
|
||||
>
|
||||
{this.generateMenus(menuTree)}
|
||||
</Menu>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
SiderMenu.propTypes = {
|
||||
menus: PropTypes.array,
|
||||
theme: PropTypes.string,
|
||||
isMobile: PropTypes.bool,
|
||||
onCollapseChange: PropTypes.func,
|
||||
}
|
||||
|
||||
export default SiderMenu
|
||||
@ -0,0 +1,88 @@
|
||||
import React, { PureComponent } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { Switch, Layout } from 'antd'
|
||||
import { t } from "@lingui/macro"
|
||||
import { Trans } from "@lingui/macro"
|
||||
import { BulbOutlined } from '@ant-design/icons'
|
||||
import ScrollBar from '../ScrollBar'
|
||||
import { config } from 'utils'
|
||||
import SiderMenu from './Menu'
|
||||
import styles from './Sider.less'
|
||||
|
||||
class Sider extends PureComponent {
|
||||
render() {
|
||||
const {
|
||||
menus,
|
||||
theme,
|
||||
isMobile,
|
||||
collapsed,
|
||||
onThemeChange,
|
||||
onCollapseChange,
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
<Layout.Sider
|
||||
width={256}
|
||||
theme={theme}
|
||||
breakpoint="lg"
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
onBreakpoint={!isMobile && onCollapseChange}
|
||||
className={styles.sider}
|
||||
>
|
||||
<div className={styles.brand}>
|
||||
<div className={styles.logo}>
|
||||
<img alt="logo" src={config.logoPath} />
|
||||
{!collapsed && <h1>{config.siteName}</h1>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.menuContainer}>
|
||||
<ScrollBar
|
||||
options={{
|
||||
// Disabled horizontal scrolling, https://github.com/utatti/perfect-scrollbar#options
|
||||
suppressScrollX: true,
|
||||
}}
|
||||
>
|
||||
<SiderMenu
|
||||
menus={menus}
|
||||
theme={theme}
|
||||
isMobile={isMobile}
|
||||
collapsed={collapsed}
|
||||
onCollapseChange={onCollapseChange}
|
||||
/>
|
||||
</ScrollBar>
|
||||
</div>
|
||||
{!collapsed && (
|
||||
<div className={styles.switchTheme}>
|
||||
<span>
|
||||
<BulbOutlined />
|
||||
<Trans>Switch Theme</Trans>
|
||||
</span>
|
||||
<Switch
|
||||
onChange={onThemeChange.bind(
|
||||
this,
|
||||
theme === 'dark' ? 'light' : 'dark'
|
||||
)}
|
||||
defaultChecked={theme === 'dark'}
|
||||
checkedChildren={t`Dark`}
|
||||
unCheckedChildren={t`Light`}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Layout.Sider>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Sider.propTypes = {
|
||||
menus: PropTypes.array,
|
||||
theme: PropTypes.string,
|
||||
isMobile: PropTypes.bool,
|
||||
collapsed: PropTypes.bool,
|
||||
onThemeChange: PropTypes.func,
|
||||
onCollapseChange: PropTypes.func,
|
||||
}
|
||||
|
||||
export default Sider
|
||||
@ -0,0 +1,110 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
.sider {
|
||||
box-shadow: fade(@primary-color, 10%) 0 0 28px 0;
|
||||
z-index: 10;
|
||||
:global {
|
||||
.ant-layout-sider-children {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.brand {
|
||||
z-index: 1;
|
||||
height: 72px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 24px;
|
||||
box-shadow: 0 1px 9px -3px rgba(0, 0, 0, 0.2);
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 36px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
vertical-align: text-bottom;
|
||||
font-size: 16px;
|
||||
text-transform: uppercase;
|
||||
display: inline-block;
|
||||
font-weight: 700;
|
||||
color: @primary-color;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0;
|
||||
.text-gradient();
|
||||
|
||||
:local {
|
||||
animation: fadeRightIn 300ms @ease-in-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menuContainer {
|
||||
height: ~'calc(100vh - 120px)';
|
||||
overflow-x: hidden;
|
||||
flex: 1;
|
||||
padding: 24px 0;
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-menu-inline {
|
||||
border-right: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switchTheme {
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s;
|
||||
|
||||
span {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
:global {
|
||||
.anticon {
|
||||
min-width: 14px;
|
||||
margin-right: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeLeftIn {
|
||||
0% {
|
||||
transform: translateX(5px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
import Header from './Header'
|
||||
import Menu from './Menu'
|
||||
import Bread from './Bread'
|
||||
import Sider from './Sider'
|
||||
|
||||
export { Header, Menu, Bread, Sider }
|
||||
@ -0,0 +1,27 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classNames from 'classnames'
|
||||
import styles from './Loader.less'
|
||||
|
||||
const Loader = ({ spinning = false, fullScreen }) => {
|
||||
return (
|
||||
<div
|
||||
className={classNames(styles.loader, {
|
||||
[styles.hidden]: !spinning,
|
||||
[styles.fullScreen]: fullScreen,
|
||||
})}
|
||||
>
|
||||
<div className={styles.warpper}>
|
||||
<div className={styles.inner} />
|
||||
<div className={styles.text}>LOADING</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Loader.propTypes = {
|
||||
spinning: PropTypes.bool,
|
||||
fullScreen: PropTypes.bool,
|
||||
}
|
||||
|
||||
export default Loader
|
||||
@ -0,0 +1,67 @@
|
||||
.loader {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100000;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
opacity: 1;
|
||||
text-align: center;
|
||||
|
||||
&.fullScreen {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.warpper {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
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"
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
import React, { Component } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import classnames from 'classnames'
|
||||
import Loader from '../Loader'
|
||||
import styles from './Page.less'
|
||||
|
||||
export default class Page extends Component {
|
||||
render() {
|
||||
const { className, children, loading = false, inner = false } = this.props
|
||||
const loadingStyle = {
|
||||
height: 'calc(100vh - 184px)',
|
||||
overflow: 'hidden',
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={classnames(className, {
|
||||
[styles.contentInner]: inner,
|
||||
})}
|
||||
style={loading ? loadingStyle : null}
|
||||
>
|
||||
{loading ? <Loader spinning /> : ''}
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Page.propTypes = {
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
loading: PropTypes.bool,
|
||||
inner: PropTypes.bool,
|
||||
}
|
||||
@ -0,0 +1,16 @@
|
||||
@import '~themes/vars.less';
|
||||
|
||||
.contentInner {
|
||||
background: #fff;
|
||||
padding: 24px;
|
||||
box-shadow: @shadow-1;
|
||||
min-height: ~'calc(100vh - 230px)';
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.contentInner {
|
||||
padding: 12px;
|
||||
min-height: ~'calc(100vh - 160px)';
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "Page",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Page.js"
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue