diff --git a/README.md b/README.md index 8989c39..ff50e46 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # Antd Admin + [![React Native](https://img.shields.io/badge/react-^15.4.1-brightgreen.svg?style=flat-square)](https://github.com/facebook/react) [![Ant Design](https://img.shields.io/badge/ant--design-^2.7.0-yellowgreen.svg?style=flat-square)](https://github.com/ant-design/ant-design) [![dva](https://img.shields.io/badge/dva-^1.1.0-orange.svg?style=flat-square)](https://github.com/dvajs/dva) @@ -8,36 +9,36 @@ [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](http://standardjs.com) -演示地址 http://zuiidea.github.io/antd-admin/ +演示地址 ## 特性 -- 基于[react](https://github.com/facebook/react),[ant-design](https://github.com/ant-design/ant-design),[dva](https://github.com/dvajs/dva),[Mock](https://github.com/nuysoft/Mock) 企业级后台管理系统最佳实践 -- 基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发 -- 基于Antd UI 设计语言,提供后台管理系统常见使用场景 -- 基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由,按需加载 -- 浅度响应式设计 +- 基于[react](https://github.com/facebook/react),[ant-design](https://github.com/ant-design/ant-design),[dva](https://github.com/dvajs/dva),[Mock](https://github.com/nuysoft/Mock) 企业级后台管理系统最佳实践 +- 基于[Mock](https://github.com/nuysoft/Mock)实现脱离后端独立开发 +- 基于Antd UI 设计语言,提供后台管理系统常见使用场景 +- 基于[dva](https://github.com/dvajs/dva)动态加载 Model 和路由,按需加载 +- 浅度响应式设计 ## To do list -- [x] 登录页面 -- [x] dashbord页面 - - [x] 数字卡片 - - [x] 实时天气卡片 - - [x] 图表 -- [x] 用户列表页面 - - [x] 增删改查 - - [x] 交互动效 -- [x] 扩展UI组件 - - [x] Ico - - [x] Search - - [x] dropOption -- [ ] 数据可视化页面 -- [ ] 模拟消息收发 - -- [ ] 升级dva-cli -- [x] 加入dva-loading -- [ ] 规范代码,目前代码遵循[standardjs](http://standardjs.com/demo.html) +- [x] 登录页面 +- [x] dashbord页面 + - [x] 数字卡片 + - [x] 实时天气卡片 + - [x] 图表 +- [x] 用户列表页面 + - [x] 增删改查 + - [x] 交互动效 +- [x] 扩展UI组件 +- [x] Ico +- [x] Search +- [x] dropOption +- [x] 基于Modal封装的layer +- [x] 加入dva-loading +- [x] 规范代码: EsLint; 自用[开发配置](assets/standard.md) +- [ ] 数据可视化页面 +- [ ] 模拟消息收发 +- [ ] 升级dva-cli ## 开发及构建 @@ -57,22 +58,20 @@ │ └── index.html ├── package.json # 项目信息 └── proxy.config.js # 数据mock配置 - ``` ### 快速开始 克隆项目文件: + ``` git clone https://github.com/zuiidea/antd-admin.git ``` 进入目录安装依赖: -``` -npm i 或者 yarn install -``` + npm i 或者 yarn install 开发: @@ -82,7 +81,6 @@ npm run dev # 使用mock拦截请求,数据存储在localStroge里 打开 http://localhost:8000 ``` - 构建: ```bash @@ -91,20 +89,26 @@ npm run build 将会生成dist目录 ``` +代码检测: + +```bash +npm run lint +``` + ### 注意事项 -- 生产环境中,已有数据接口,请将`src/utils/index.js`第四行 `require('./mock.js')`注释 -- 开发环境中,如再mock目录新增文件,请在`src/utils/mock.js`第二行的`mockData`数组中添加 -- 如需重写antd样式配置,请修改`src/theme.js` -- 项目配置文件在`src/utils/config.js` -- 如需重写异步请求函数,请修改`src/utils/request.js` - (关于为什么使用robe-ajax而不是fetch:在一个无服务器的环境中模拟数据请求,[Mock](https://github.com/nuysoft/Mock)不能拦截Fetch,只能拦截XHR,所以我选了一个类似jquery Ajax的库robe-ajax) +- 生产环境中,已有数据接口,请将`src/utils/index.js`第四行 `require('./mock.js')`注释 +- 开发环境中,如再mock目录新增文件,请在`src/utils/mock.js`第二行的`mockData`数组中添加 +- 如需重写antd样式配置,请修改`src/theme.js` +- 项目配置文件在`src/utils/config.js` +- 如需重写异步请求函数,请修改`src/utils/request.js` + (关于为什么使用robe-ajax而不是fetch:在一个无服务器的环境中模拟数据请求,[Mock](https://github.com/nuysoft/Mock)不能拦截Fetch,只能拦截XHR,所以我选了一个类似jquery Ajax的库robe-ajax) ## 参考 -用户列表:https://github.com/dvajs/dva/tree/master/examples/user-dashboard +用户列表: -dashboard设计稿:https://dribbble.com/shots/3108122-Dashboard-Admin (已征得作者同意) +dashboard设计稿: (已征得作者同意) ## 截屏 diff --git a/assets/standard.md b/assets/standard.md new file mode 100644 index 0000000..f8cd8ce --- /dev/null +++ b/assets/standard.md @@ -0,0 +1,35 @@ +### 开发环境 + +- OS:Windows +- 编辑器:Atom +- cmd:Cmder + +### Atom 插件 + +- [atom-beautify](https://atom.io/packages/atom-beautify) + + #### Less + + - [x] Beautify On Save + + #### Javascript + + - [ ] Disable Beautifying Language + + #### Markdown + + - [x] Beautify On Save + - [x] Default Beautifier:Remark + + #### HTML + + - [x] Beautify On Save + +- [linter](https://atom.io/packages/linter) + - [ ] Lint on Change +- [linter-eslint](https://atom.io/packages/linter-eslint) + - [x] Fix errors on save + +### Cmder 主题 + +- [Panda-Theme-Cmder](https://github.com/HamidFaraji/Panda-Theme-Cmder) diff --git a/src/_index.html b/src/_index.html new file mode 100644 index 0000000..92370ca --- /dev/null +++ b/src/_index.html @@ -0,0 +1,26 @@ + + + + + + + + Ant Design Admin + + + + + + + +
+ + + + + + + diff --git a/src/_index.js b/src/_index.js index 9fdb7d3..1df2f9d 100644 --- a/src/_index.js +++ b/src/_index.js @@ -1,4 +1,4 @@ -import './index.html' +import './_index.html' import 'babel-polyfill' import createLoading from 'dva-loading' import dva from 'dva' diff --git a/src/index.html b/src/index.html index 11cf21e..373672f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,6 @@ + @@ -12,12 +13,14 @@ src="https://as.alipayobjects.com/g/component/??console-polyfill/0.2.2/index.js,media-match/2.0.2/media.match.min.js"> + -
+
- - + + + diff --git a/src/routes/ui/layer.js b/src/routes/ui/layer.js index 873c49f..13cd9e8 100644 --- a/src/routes/ui/layer.js +++ b/src/routes/ui/layer.js @@ -61,6 +61,12 @@ const IcoPage = () => { }, ]} dataSource={[ + { + props: 'content', + desciption: '内容', + type: 'string|ReactNode', + default: '无', + }, { props: 'title', desciption: '标题',