From 45fef9b431a0a5a7cdd5399aaebd9fabec2b2dd3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8A=B1=E8=A3=A4=E8=A1=A9?= Date: Fri, 29 Dec 2017 16:07:42 +0800 Subject: [PATCH] Feature/english (#381) * perf[navbar]: set langSelect to component && refine errorLog component * feat[login]:add 18n to login form * fix[pagination]: fixed when selected page-sizes * perf[i18n]:dashboard document svg permission * perf[charts]: perf effect * perf[i18n]:excel && zip * perf[i18n]: table && errorLog && theme * perf[i18n]: components * perf[i18n]: direct use $t * perf[i18n]: complex-table * update README.md * update README.md :blue_book: * perf[i18n]: refine code comments --- LICENSE | 2 +- README-en.md | 177 ------------ README.md | 214 +++++++-------- README.zh-CN.md | 165 ++++++++++++ src/components/Charts/lineMarker.vue | 19 +- src/components/Charts/mixChart.vue | 23 +- src/components/Upload/singleImage3.vue | 1 - src/errorLog.js | 4 + src/icons/svg/trendChart1.svg | 1 - src/icons/svg/trendChart2.svg | 1 - src/icons/svg/trendChart3.svg | 1 - src/lang/en.js | 73 ++++- src/lang/zh.js | 69 +++++ src/main.js | 6 +- src/mock/article.js | 8 +- src/permission.js | 18 +- src/router/index.js | 4 + src/styles/element-ui.scss | 7 + src/styles/index.scss | 3 +- src/utils/clipboard.js | 4 +- src/utils/i18n.js | 4 +- src/utils/request.js | 10 +- src/views/charts/keyboard.vue | 9 +- src/views/charts/line.vue | 9 +- src/views/charts/mixChart.vue | 10 +- src/views/clipboard/index.vue | 4 +- src/views/components-demo/avatarUpload.vue | 10 +- src/views/components-demo/backToTop.vue | 253 +++++++++--------- src/views/components-demo/dndList.vue | 2 +- src/views/components-demo/dropzone.vue | 8 +- src/views/components-demo/markdown.vue | 6 +- src/views/components-demo/splitpane.vue | 6 +- src/views/components-demo/sticky.vue | 139 +++++----- src/views/components-demo/tinymce.vue | 16 +- .../dashboard/admin/components/BarChart.vue | 2 +- .../dashboard/admin/components/LineChart.vue | 2 +- .../dashboard/admin/components/PanelGroup.vue | 8 +- .../dashboard/admin/components/PieChart.vue | 2 +- .../admin/components/RaddarChart.vue | 2 +- .../admin/components/TransactionTable.vue | 4 +- src/views/dashboard/editor/index.vue | 4 +- src/views/documentation/index.vue | 7 +- src/views/errorLog/index.vue | 10 +- src/views/example/tab/components/tabPane.vue | 16 +- src/views/example/tab/index.vue | 8 +- src/views/example/table/complexTable.vue | 106 ++++---- src/views/example/table/dragTable.vue | 22 +- .../example/table/dynamicTable/fixedThead.vue | 10 +- .../example/table/dynamicTable/index.vue | 4 +- .../table/dynamicTable/unfixedThead.vue | 2 +- src/views/example/table/inlineEditTable.vue | 20 +- src/views/excel/exportExcel.vue | 17 +- src/views/excel/selectExcel.vue | 35 +-- src/views/layout/components/AppMain.vue | 1 - src/views/layout/components/Navbar.vue | 12 +- src/views/login/authredirect.vue | 14 +- src/views/login/index.vue | 38 ++- src/views/permission/index.vue | 4 +- src/views/svg-icons/index.vue | 3 +- src/views/theme/index.vue | 26 +- src/views/zip/index.vue | 15 +- 61 files changed, 901 insertions(+), 779 deletions(-) delete mode 100644 README-en.md create mode 100644 README.zh-CN.md delete mode 100644 src/icons/svg/trendChart1.svg delete mode 100644 src/icons/svg/trendChart2.svg delete mode 100644 src/icons/svg/trendChart3.svg diff --git a/LICENSE b/LICENSE index b4bb0d9f..68144da7 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 PanJiaChen +Copyright (c) 2017-presen PanJiaChen Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/README-en.md b/README-en.md deleted file mode 100644 index 25459147..00000000 --- a/README-en.md +++ /dev/null @@ -1,177 +0,0 @@ -[![vue](https://img.shields.io/badge/vue-2.4.2-brightgreen.svg)](https://github.com/vuejs/vue) -[![element-ui](https://img.shields.io/badge/element--ui-1.4.2-brightgreen.svg)](https://github.com/ElemeFE/element) -[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) -[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]() - -## Intro - -> In the past half year, I have been building a backend for management dashboard using Vue. Though the backend has contained greater than 70 pages and over 10 permissions, it still takes insignificant effort to maintain the project. So I decide to make it open source so as to share my development experience and progress on backend. The tech stack is mainly [Vue.js](https://github.com/vuejs/vue)+[Element](https://github.com/ElemeFE/element)+[axios](https://github.com/mzabriskie/axios). Since it's a personal project, all data requests are simulated with [Mock.js](https://github.com/nuysoft/Mock). **Note:** if anyone wants to modify or develop based on this project, please remove the mock files. - -**Live demo:** http://panjiachen.github.io/vue-element-admin - -**Note: element-ui@1.4.2 is used in the project, so vue 2.3.0+ is required.** - - - vueAdmin-template: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   - - electron-vue-admin: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) - - Donate:[donate](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md#donate) - -## Features - -- Login/Logout -- Permission authentication -- Sidebar -- Breadcrumb -- Rich text editor -- Markdown editor -- JSON editor -- Drag & drop list -- SplitPane -- Dropzone -- Sticky -- CountTo -- ECharts -- 401, 404 error page -- Error log -- Export Excel -- Upload Excel -- Export Zip -- Table example -- Interactive table example -- Drag & drop table example -- Form example -- Multi-environments distribution -- Dashboard -- Two-factor authentication -- Collapsing sidebar (support nested routes) -- Mock data -- cache tabs example -- screenfull -- markdown2html -- views-tab -- clipboard - -## Development - -```bash -# Clone project -git clone https://github.com/PanJiaChen/vue-element-admin.git - -# Install dependencies -npm install - -# Or (not recommended for cnpm due to unknown bugs, use taobao mirror instead) -npm install --registry=https://registry.npm.taobao.org - -# Run local dev server -npm run dev -``` - -Visit in browser: http://localhost:9527 - -## Distribution - -```bash -# Build staged environment with webpack-bundle-analyzer -npm run build:sit-preview - -# Build production environment -npm run build:prod -``` - -## Directory structure - -``` -├── build // build  -├── config // config -├── src // source code -│   ├── api // all requests -│   ├── assets // static resource like themes, fonts -│   ├── components // global public components -│   ├── directive // global directive -│   ├── filters // global filters -│   ├── mock // mock data -│   ├── router // router -│   ├── store // global status management -│   ├── styles // global styles -│   ├── utils // global public functions -│   ├── view // view -│   ├── App.vue // entry view -│   └── main.js // entry for loading components, initialization -├── static // third-party libraries not packed with Webpack -│   └── Tinymce // rich text -├── .babelrc // babel-loader config -├── eslintrc.js // eslint config -├── .gitignore // gitignore -├── favicon.ico // favicon -├── index.html // html template -└── package.json // package.json -``` - -## Changelog -Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). - -## Donate -If you find this project useful, you can buy me a cup of coffee -![donate](https://panjiachen.github.io/donate/donation.png) - -## State Management - -Only status of user and app configuration is managed by Vuex. Other data are managed by their own business pages. - -## Demo - -#### Two-factor authentication, supporting WeChat and QQ - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/2login.gif) - -#### Realtime switching themes - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/theme.gif) - -#### tabs - -![tabs](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/tabs.gif)
- -#### Collapsing sidebar - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/leftmenu.gif) - -#### Drag & drop table - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/order.gif) - -#### Interactive table - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/dynamictable.gif) - -#### Uploading cropped avatar - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/uploadAvatar.gif) - -#### Error log - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/errorlog.gif) - -#### Rich text (integrated with Qiniu, watermark and customization) - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/editor.gif) - -#### Packaging table component - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/table.gif) - -#### Charts - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/echarts.gif) - -#### Exporting to Excel - -![](https://github.com/PanJiaChen/vue-element-admin/blob/master/gifs/excel.png) - -#### More - -http://panjiachen.github.io/vue-element-admin - -## License - -MIT diff --git a/README.md b/README.md index d4f11fb9..fda9814a 100644 --- a/README.md +++ b/README.md @@ -2,177 +2,151 @@

-# vue-element-admin +

+ + vue + + + element-ui + + + Build Status + + + license + + + GitHub release + +

-[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg)](https://github.com/vuejs/vue) -[![element-ui](https://img.shields.io/badge/element--ui-2.0.8-brightgreen.svg)](https://github.com/ElemeFE/element) -[![Build Status](https://travis-ci.org/PanJiaChen/vue-element-admin.svg?branch=master)](https://travis-ci.org/PanJiaChen/vue-element-admin) -[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) -[![GitHub release](https://img.shields.io/github/release/PanJiaChen/vue-element-admin.svg)]() +English | [简体中文](./README.zh-CN.md) -**A magical vue admin.** +## Introduction -- [线上地址](http://panjiachen.github.io/vue-element-admin) +`vue-element-admin` is a production-ready solution for admin interfaces. Based on [Vue.js](https://github.com/vuejs/vue) and use the UI Toolkit -- [element](https://github.com/ElemeFE/element). `vue-element-admin` is a magical vue admin, it based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you. -- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/) +- [Preview](http://panjiachen.github.io/vue-element-admin) -- [English Document](https://github.com/PanJiaChen/vue-element-admin/blob/master/README-en.md) +- [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/) - [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) - [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate) -**本项目的定位是后台集成方案，不适合当基础模板来开发。** - - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   - - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) +**vue-element-admin is a admin interfaces integration solution, which is not suitable for secondary development as a base template.** -**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0** + - Base template recommends using: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   + - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) -## 前序准备 +**Note: This project uses element-ui@2.0.0+ version, so the minimum compatible vue@2.5.0** -你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element)，提前了解和学习这些知识会对使用本项目有很大的帮助。 +## Preparation -同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目 - - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) - - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) - - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) - - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) - - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) - - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) +You need to install [node](http://nodejs.org/) and [git](https://git-scm.com/) locally. The project is based on [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) 和 [element-ui](https://github.com/ElemeFE/element). All data requests for this project are simulated using [Mock.js](https://github.com/nuysoft/Mock). It would be helpful if you have pre-existing knowledge on those. - 响应需求，开了一个qq群 `591724180` 方便大家交流 + **This project is not a scaffolding and is more of an integrated solution.** - 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西 - - **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr** - - **本项目并不是一个脚手架，更倾向于是一个集成解决方案** - - **该项目不支持低版本游览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** + **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.**

-## 功能 -- 登录/注销 -- 权限验证 -- 多环境发布 -- 动态侧边栏（支持多级路由） -- 动态面包屑 -- 国际化多语言 -- 多种动态换肤 -- 快捷导航(标签页 支持右键操作) -- 富文本编辑器 -- Markdown编辑器 -- JSON编辑器 -- Screenfull全屏 -- 列表拖拽 -- Svg Sprite 图标 +## Features +``` +- Login / Logout +- Permission authentication +- Multi-environment build +- Dynamic sidebar (supports multi-level routing) +- Dynamic breadcrumb +- I18n +- Customizable theme +- Tags-view(Tab page Support right-click operation) +- Rich text editor +- Markdown editor +- JSON editor +- Screenfull +- Drag and drop list +- Svg Sprite - Dashboard -- 本地mock数据 -- Echarts 图表 -- Clipboard(剪贴复制) -- 401/404错误页面 -- 错误日志 -- 导出excel -- 导出zip -- 前端可视化excel +- Mock data +- Echarts +- Clipboard +- 401/404 error page +- Error log +- Export excel +- Export zip +- Front-end visualization excel - Table example -- 动态table example -- 拖拽table example -- 内联编辑table example +- Dynamictable example +- Drag and drop table example +- Inline edit table example - Form example -- 二步登录 +- Two-step login - SplitPane - Dropzone - Sticky - CountTo - Markdown to html +``` + +## Getting started -## 开发 ```bash - # 克隆项目 - git clone https://github.com/PanJiaChen/vue-element-admin.git +# clone the projice +git clone https://github.com/PanJiaChen/vue-element-admin.git - # 安装依赖 - npm install -     - # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 - npm install --registry=https://registry.npm.taobao.org +# install dependency +npm install - # 启动服务 - npm run dev +# develop +npm run dev ``` -浏览器访问 http://localhost:9527 -## 发布 +This will automatically open http://localhost:9527. + +## Build ```bash - # 构建测试环境 - npm run build:sit +# build for test environment +npm run build:sit - # 构建生成环境 - npm run build:prod +# build for production environment +npm run build:prod ``` -## 其它 +## Advanced ```bash - # --report to build with bundle size analytics - npm run build:prod --report +# --report to build with bundle size analytics +npm run build:prod --report - # --preview to start a server in local to preview - npm run build:prod --preview +# --preview to start a server in local to preview +npm run build:prod --preview - # lint code - npm run lint +# lint code +npm run lint + +# auto fix +npm run lint -- --fix ``` -更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy) - -## 目录结构 -```shell -├── build // 构建相关   -├── config // 配置相关 -├── src // 源代码 -│   ├── api // 所有请求 -│   ├── assets // 主题 图片等静态资源 -│   ├── components // 全局公用组件 -│   ├── directive // 全局指令 -│   ├── filtres // 全局 filter -│   ├── icons // 项目svg icons -│   ├── lang // 国际化 lang -│   ├── mock // 项目mock 模拟数据 -│   ├── router // 路由 -│   ├── store // 全局 store -│   ├── styles // 全局样式 -│   ├── utils // 全局公用方法 -│   ├── vendor // 公用vendor -│   ├── views // views -│   ├── App.vue // 入口页面 -│   ├── main.js // 入口js 初始化 加载组件等 -│ └── permission.js // 权限管理 -├── static // 第三方不打包资源 -│   └── Tinymce // 富文本 -├── .babelrc // babel-loader 配置 -├── .eslintrc.js // eslint 配置项 -├── .postcssrc.js // postcss 配置项 -├── .gitignore // git 忽略项 -├── favicon.ico // favicon图标 -├── index.html // html模板 -└── package.json // package.json - -``` +Refer to [Documentation](https://panjiachen.github.io/vue-element-admin-site/#/deploy) for more information ## Changelog Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). ## Online Demo -[查看更多demo](http://panjiachen.github.io/vue-element-admin) +[Preview](http://panjiachen.github.io/vue-element-admin) ## Donate -If you find this project useful, you can buy me a cup of coffee -![donate](https://panjiachen.github.io/donate/donation.png) +If you find this project useful, you can buy author a glass of juice :tropical_drink: + +![donate](https://wpimg.wallstcn.com/bd273f0d-83a0-4ef2-92e1-9ac8ed3746b9.png) + +[Paypal Me](https://www.paypal.me/panfree23) ## License -MIT +[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) + +Copyright (c) 2017-presen PanJiaChen diff --git a/README.zh-CN.md b/README.zh-CN.md new file mode 100644 index 00000000..d46a3c12 --- /dev/null +++ b/README.zh-CN.md @@ -0,0 +1,165 @@ +

+ +

+ +

+ + vue + + + element-ui + + + Build Status + + + license + + + GitHub release + +

+ +简体中文 | [English](./README.md) + +## 简介 + +`vue-element-admin` 是一个后台集成解决方案，它基于 [Vue.js](https://github.com/vuejs/vue) 和 [element](https://github.com/ElemeFE/element)。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证等很多功能特性，相信不管你的需求是什么，本项目都能帮助到你。 + +- [在线访问](http://panjiachen.github.io/vue-element-admin) + +- [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/) + +- [wiki](https://github.com/PanJiaChen/vue-element-admin/wiki) + +- [donate](https://panjiachen.github.io/vue-element-admin-site/#/donate) + +**本项目的定位是后台集成方案，不适合当基础模板来开发。** + - 模板建议使用: [vueAdmin-template](https://github.com/PanJiaChen/vueAdmin-template)   + - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) + +**注意：该项目使用 element-ui@2.0.0+ 版本，所以最低兼容 vue@2.5.0** + +## 前序准备 + +你的本地环境需要安装 [node](http://nodejs.org/) 和 [git](https://git-scm.com/)。我们的技术栈基于 [ES2015+](http://es6.ruanyifeng.com/)、[vue](https://cn.vuejs.org/index.html)、[vuex](https://vuex.vuejs.org/zh-cn/)、[vue-router](https://router.vuejs.org/zh-cn/) and [element-ui](https://github.com/ElemeFE/element)，所有的请求数据都使用[Mock.js](https://github.com/nuysoft/Mock)模拟，提前了解和学习这些知识会对使用本项目有很大的帮助。 + +同时配套一个系列的教程文章，如何从零构建后一个完整的后台项目，建议大家先看完这些文章再来实践本项目 + - [手摸手，带你用 vue 撸后台 系列一(基础篇)](https://juejin.im/post/59097cd7a22b9d0065fb61d2) + - [手摸手，带你用 vue 撸后台 系列二(登录权限篇)](https://juejin.im/post/591aa14f570c35006961acac) + - [手摸手，带你用 vue 撸后台 系列三 (实战篇)](https://juejin.im/post/593121aa0ce4630057f70d35) + - [手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)](https://juejin.im/post/595b4d776fb9a06bbe7dba56) + - [手摸手，带你封装一个 vue component](https://segmentfault.com/a/1190000009090836) + - [手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) + + 响应需求，开了一个qq群 `591724180` 方便大家交流 + + 或者加入该群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西 + + **如有问题请先看上述使用文档和文章，若不能满足，欢迎 issue 和 pr** + + **本项目并不是一个脚手架，更倾向于是一个集成解决方案** + + **该项目不支持低版本浏览器(如ie)，有需求请自行添加polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)** + +

+ +

+ +## 功能 +``` +- 登录/注销 +- 权限验证 +- 多环境发布 +- 动态侧边栏（支持多级路由） +- 动态面包屑 +- 国际化多语言 +- 多种动态换肤 +- 快捷导航(标签页) +- 富文本编辑器 +- Markdown编辑器 +- JSON编辑器 +- Screenfull全屏 +- 列表拖拽 +- Svg Sprite 图标 +- Dashboard +- 本地mock数据 +- Echarts 图表 +- Clipboard(剪贴复制) +- 401/404错误页面 +- 错误日志 +- 导出excel +- 导出zip +- 前端可视化excel +- Table example +- 动态table example +- 拖拽table example +- 内联编辑table example +- Form example +- 二步登录 +- SplitPane +- Dropzone +- Sticky +- CountTo +- Markdown2html +``` + +## 开发 +```bash +# 克隆项目 +git clone https://github.com/PanJiaChen/vue-element-admin.git + +# 安装依赖 +npm install +    +# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 +npm install --registry=https://registry.npm.taobao.org + +# 启动服务 +npm run dev +``` +浏览器访问 http://localhost:9527 + +## 发布 +```bash +# 构建测试环境 +npm run build:sit + +# 构建生成环境 +npm run build:prod +``` + +## 其它 +```bash +# --report to build with bundle size analytics +npm run build:prod --report + +# --preview to start a server in local to preview +npm run build:prod --preview + +# lint code +npm run lint + +# auto fix +npm run lint -- --fix +``` + +更多信息请参考 [使用文档](https://panjiachen.github.io/vue-element-admin-site/#/deploy) + +## Changelog +Detailed changes for each release are documented in the [release notes](https://github.com/PanJiaChen/vue-element-admin/releases). + +## Online Demo +[在线 Demo](http://panjiachen.github.io/vue-element-admin) + +## Donate +如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 :tropical_drink: +![donate](https://panjiachen.github.io/donate/donation.png) + +[Paypal Me](https://www.paypal.me/panfree23) + +## License + +[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE) + +Copyright (c) 2017-presen PanJiaChen diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue index 80e6b7ec..e8dce6da 100644 --- a/src/components/Charts/lineMarker.vue +++ b/src/components/Charts/lineMarker.vue @@ -46,13 +46,14 @@ export default { this.chart.setOption({ backgroundColor: '#394056', title: { - text: '请求数', + top: 20, + text: 'Requests', textStyle: { fontWeight: 'normal', fontSize: 16, color: '#F1F1F3' }, - left: '6%' + left: '1%' }, tooltip: { trigger: 'axis', @@ -63,11 +64,12 @@ export default { } }, legend: { + top: 20, icon: 'rect', itemWidth: 14, itemHeight: 5, itemGap: 13, - data: ['移动', '电信', '联通'], + data: ['CMCC', 'CTCC', 'CUCC'], right: '4%', textStyle: { fontSize: 12, @@ -75,9 +77,10 @@ export default { } }, grid: { + top: 100, left: '3%', right: '4%', - bottom: '3%', + bottom: '2%', containLabel: true }, xAxis: [{ @@ -92,7 +95,7 @@ export default { }], yAxis: [{ type: 'value', - name: '单位（%）', + name: '(%)', axisTick: { show: false }, @@ -114,7 +117,7 @@ export default { } }], series: [{ - name: '移动', + name: 'CMCC', type: 'line', smooth: true, symbol: 'circle', @@ -148,7 +151,7 @@ export default { }, data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122] }, { - name: '电信', + name: 'CTCC', type: 'line', smooth: true, symbol: 'circle', @@ -182,7 +185,7 @@ export default { }, data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150] }, { - name: '联通', + name: 'CUCC', type: 'line', smooth: true, symbol: 'circle', diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue index 05260b9f..6454dd36 100644 --- a/src/components/Charts/mixChart.vue +++ b/src/components/Charts/mixChart.vue @@ -46,15 +46,16 @@ export default { const xData = (function() { const data = [] for (let i = 1; i < 13; i++) { - data.push(i + '月份') + data.push(i + 'month') } return data }()) this.chart.setOption({ backgroundColor: '#344b58', title: { - text: '统计', - x: '4%', + text: 'statistics', + x: '20', + top: '20', textStyle: { color: '#fff', fontSize: '22' @@ -81,12 +82,12 @@ export default { } }, legend: { - x: '15%', + x: '5%', top: '10%', textStyle: { color: '#90979c' }, - data: ['女', '男', '平均'] + data: ['female', 'male', 'average'] }, calculable: true, xAxis: [{ @@ -158,9 +159,9 @@ export default { end: 35 }], series: [{ - name: '女', + name: 'female', type: 'bar', - stack: '总量', + stack: 'total', barMaxWidth: 35, barGap: '10%', itemStyle: { @@ -195,9 +196,9 @@ export default { }, { - name: '男', + name: 'male', type: 'bar', - stack: '总量', + stack: 'total', itemStyle: { normal: { color: 'rgba(0,191,183,1)', @@ -226,9 +227,9 @@ export default { 220 ] }, { - name: '平均', + name: 'average', type: 'line', - stack: '总量', + stack: 'total', symbolSize: 10, symbol: 'circle', itemStyle: { diff --git a/src/components/Upload/singleImage3.vue b/src/components/Upload/singleImage3.vue index 4183b88c..ea63e648 100644 --- a/src/components/Upload/singleImage3.vue +++ b/src/components/Upload/singleImage3.vue @@ -7,7 +7,6 @@
-
  全球 付费节目单 最热 经济
diff --git a/src/errorLog.js b/src/errorLog.js index f5aa6644..7f7e492e 100644 --- a/src/errorLog.js +++ b/src/errorLog.js @@ -3,7 +3,10 @@ import store from './store' // you can set only in production env show the error-log // if (process.env.NODE_ENV === 'production') { + Vue.config.errorHandler = function(err, vm, info, a) { + // Don't ask me why I use Vue.nextTick, it just a hack. + // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500 Vue.nextTick(() => { store.dispatch('addErrorLog', { err, @@ -14,4 +17,5 @@ Vue.config.errorHandler = function(err, vm, info, a) { console.error(err, info) }) } + // } diff --git a/src/icons/svg/trendChart1.svg b/src/icons/svg/trendChart1.svg deleted file mode 100644 index 6297fe8a..00000000 --- a/src/icons/svg/trendChart1.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/trendChart2.svg b/src/icons/svg/trendChart2.svg deleted file mode 100644 index 0c08ff08..00000000 --- a/src/icons/svg/trendChart2.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/icons/svg/trendChart3.svg b/src/icons/svg/trendChart3.svg deleted file mode 100644 index 17124d90..00000000 --- a/src/icons/svg/trendChart3.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/lang/en.js b/src/lang/en.js index a5e31a96..b243b0a5 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -20,7 +20,7 @@ export default { backToTop: 'BackToTop', charts: 'Charts', keyboardChart: 'Keyboard Chart', - lineChart: 'Line chart', + lineChart: 'Line Chart', mixChart: 'Mix Chart', example: 'Example', Table: 'Table', @@ -45,6 +45,13 @@ export default { clipboardDemo: 'Clipboard', i18n: 'I18n' }, + navbar: { + logOut: 'Log Out', + dashboard: 'Dashboard', + github: 'Github', + screenfull: 'screenfull', + theme: 'theme' + }, login: { title: 'Login Form', logIn: 'Log in', @@ -52,6 +59,68 @@ export default { password: 'Password', any: 'any', thirdparty: 'Or connect with', - thirdpartyTips: 'Local can not be simulated, please combine their own business simulation! ! !' + thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !' + }, + documentation: { + documentation: 'Documentation', + github: 'Github Repository' + }, + permission: { + roles: 'Your roles', + switchRoles: 'Switch roles' + }, + components: { + documentation: 'Documentation', + tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.', + dropzoneTips: 'Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.', + stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.', + backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner', + backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally', + imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.' + }, + table: { + dynamicTips1: 'Fixed header, sorted by header order', + dynamicTips2: 'Not fixed header, sorted by click order', + dragTips1: 'The default order', + dragTips2: 'The after dragging order', + title: 'Title', + importance: 'Imp', + type: 'Type', + remark: 'Remark', + search: 'Search', + add: 'Add', + export: 'Export', + reviewer: 'reviewer', + id: 'ID', + date: 'Date', + author: 'Author', + readings: 'Readings', + status: 'Status', + actions: 'Actions', + edit: 'Edit', + publish: 'Publish', + draft: 'Draft', + delete: 'Delete', + cancel: 'Cancel', + confirm: 'Confirm' + }, + errorLog: { + tips: 'Please click the bug icon in the upper right corner', + description: 'Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.', + documentation: 'Document introduction' + }, + excel: { + export: 'Export', + selectedExport: 'Export selected items', + placeholder: 'Please enter the file name(default excel-list)' + }, + zip: { + export: 'Export', + placeholder: 'Please enter the file name(default file)' + }, + theme: { + change: 'Theme change', + documentation: 'Theme documentation', + tips: 'Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details.' } } diff --git a/src/lang/zh.js b/src/lang/zh.js index 61e3d13b..4dd83533 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -45,6 +45,13 @@ export default { clipboardDemo: 'clipboard', i18n: '国际化' }, + navbar: { + logOut: '退出登录', + dashboard: '首页', + github: '项目地址', + screenfull: '全屏', + theme: '换肤' + }, login: { title: '系统登录', logIn: '登录', @@ -53,5 +60,67 @@ export default { any: '随便填', thirdparty: '第三方登录', thirdpartyTips: '本地不能模拟，请结合自己业务进行模拟！！！' + }, + documentation: { + documentation: '文档', + github: 'Github 地址' + }, + permission: { + roles: '你的权限', + switchRoles: '切换权限' + }, + components: { + documentation: '文档', + tinymceTips: '富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见', + dropzoneTips: '由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone', + stickyTips: '当页面滚动到预设的位置会吸附在顶部', + backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮', + backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素', + imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。' + }, + table: { + dynamicTips1: '固定表头, 按照表头顺序排序', + dynamicTips2: '不固定表头, 按照点击顺序排序', + dragTips1: '默认顺序', + dragTips2: '拖拽后顺序', + title: '标题', + importance: '重要性', + type: '类型', + remark: '点评', + search: '搜索', + add: '添加', + export: '导出', + reviewer: '审核人', + id: '序号', + date: '时间', + author: '作者', + readings: '阅读数', + status: '状态', + actions: '操作', + edit: '编辑', + publish: '发布', + draft: '草稿', + delete: '删除', + cancel: '取 消', + confirm: '确 定' + }, + errorLog: { + tips: '请点击右上角bug小图标', + description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。', + documentation: '文档介绍' + }, + excel: { + export: '导出', + selectedExport: '导出已选择项', + placeholder: '请输入文件名(默认excel-list)' + }, + zip: { + export: '导出', + placeholder: '请输入文件名(默认file)' + }, + theme: { + change: '换肤', + documentation: '换肤文档', + tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。' } } diff --git a/src/main.js b/src/main.js index 30140400..07cbbe6e 100644 --- a/src/main.js +++ b/src/main.js @@ -15,12 +15,12 @@ import i18n from './lang' // Internationalization import './icons' // icon import './errorLog'// error log import './permission' // permission control -import './mock' // simulation data generator +import './mock' // simulation data -import * as filters from './filters' // global filter +import * as filters from './filters' // global filters Vue.use(Element, { - size: 'medium', + size: 'medium', // set element-ui default size i18n: (key, value) => i18n.t(key, value) }) diff --git a/src/mock/article.js b/src/mock/article.js index 20dc4e1c..2f5b4583 100644 --- a/src/mock/article.js +++ b/src/mock/article.js @@ -8,9 +8,9 @@ for (let i = 0; i < count; i++) { List.push(Mock.mock({ id: '@increment', timestamp: +Mock.Random.date('T'), - author: '@cname', - auditor: '@cname', - title: '@ctitle(10, 20)', + author: '@first', + reviewer: '@first', + title: '@title(5, 10)', forecast: '@float(0, 100, 2, 2)', importance: '@integer(1, 3)', 'type|1': ['CN', 'US', 'JP', 'EU'], @@ -43,7 +43,7 @@ export default { } }, getPv: () => ({ - pvData: [{ key: 'PC网站', pv: 1024 }, { key: 'mobile网站', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }] + pvData: [{ key: 'PC', pv: 1024 }, { key: 'mobile', pv: 1024 }, { key: 'ios', pv: 1024 }, { key: 'android', pv: 1024 }] }), getArticle: () => ({ id: 120000000001, diff --git a/src/permission.js b/src/permission.js index e470ffb7..e3400588 100644 --- a/src/permission.js +++ b/src/permission.js @@ -1,21 +1,21 @@ import router from './router' import store from './store' -import NProgress from 'nprogress' // Progress 进度条 -import 'nprogress/nprogress.css'// Progress 进度条样式 -import { getToken } from '@/utils/auth' // 验权 +import NProgress from 'nprogress' // progress bar +import 'nprogress/nprogress.css'// progress bar style +import { getToken } from '@/utils/auth' // getToken from cookie import { Message } from 'element-ui' // permissiom judge function hasPermission(roles, permissionRoles) { - if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过 + if (roles.indexOf('admin') >= 0) return true // admin permission passed directly if (!permissionRoles) return true return roles.some(role => permissionRoles.indexOf(role) >= 0) } -const whiteList = ['/login', '/authredirect']// 不重定向白名单 +const whiteList = ['/login', '/authredirect']// no redirect whitelist router.beforeEach((to, from, next) => { - NProgress.start() // 开启Progress + NProgress.start() // start progress bar if (getToken()) { // 判断是否有token if (to.path === '/login') { next({ path: '/' }) @@ -26,11 +26,11 @@ router.beforeEach((to, from, next) => { const roles = res.data.role store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表 router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 - next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,replace: true so the navigation will not leave a history record + next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record }) }).catch(() => { store.dispatch('FedLogOut').then(() => { - Message.error('验证失败,请重新登录') + Message.error('Verification failed, please login again') next({ path: '/login' }) }) }) @@ -56,5 +56,5 @@ router.beforeEach((to, from, next) => { }) router.afterEach(() => { - NProgress.done() // 结束Progress + NProgress.done() // finish progress bar }) diff --git a/src/router/index.js b/src/router/index.js index 26c47f4a..221ec7eb 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -9,6 +9,10 @@ Vue.use(Router) /* Layout */ import Layout from '../views/layout/Layout' +/** note: submenu only apppear when children.length>=1 +* detail see https://panjiachen.github.io/vue-element-admin-site/#/router-and-nav?id=sidebar +**/ + /** * hidden: true if `hidden:true` will not show in the sidebar(default is false) * redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 72b03e37..08a7388a 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -27,6 +27,13 @@ } } + .fixed-width{ + .el-button--mini{ + padding: 7px 10px; + width: 60px; + } + } + .status-col { .cell { padding: 0 10px; diff --git a/src/styles/index.scss b/src/styles/index.scss index 5cc936b3..f98127f1 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -102,7 +102,8 @@ code { margin-bottom: 20px; display: block; line-height: 36px; - font-size: 14px; + font-size: 15px; + font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif; a { color: #337ab7; cursor: pointer; diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js index 25295900..e916a44d 100644 --- a/src/utils/clipboard.js +++ b/src/utils/clipboard.js @@ -3,7 +3,7 @@ import Clipboard from 'clipboard' function clipboardSuccess() { Vue.prototype.$message({ - message: '复制成功', + message: 'Copy successfully', type: 'success', duration: 1500 }) @@ -11,7 +11,7 @@ function clipboardSuccess() { function clipboardError() { Vue.prototype.$message({ - message: '复制失败', + message: 'Copy failed', type: 'error' }) } diff --git a/src/utils/i18n.js b/src/utils/i18n.js index 6e4ca145..faa52062 100644 --- a/src/utils/i18n.js +++ b/src/utils/i18n.js @@ -1,4 +1,4 @@ -// translate router.meta.title , be used in breadcrumb sidebar tagsview +// translate router.meta.title, be used in breadcrumb sidebar tagsview export function generateTitle(title) { - return this.$t('route.' + title) // $t :this method from vue-i18n ,inject in @/lang/index.js + return this.$t('route.' + title) // $t :this method from vue-i18n, inject in @/lang/index.js } diff --git a/src/utils/request.js b/src/utils/request.js index ee007f1f..eb70b363 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -3,17 +3,17 @@ import { Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' -// 创建axios实例 +// create an axios instance const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url - timeout: 5000 // 请求超时时间 + timeout: 5000 // request timeout }) -// request拦截器 +// request interceptor service.interceptors.request.use(config => { // Do something before request is sent if (store.getters.token) { - config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改 + config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改 } return config }, error => { @@ -22,7 +22,7 @@ service.interceptors.request.use(config => { Promise.reject(error) }) -// respone拦截器 +// respone interceptor service.interceptors.response.use( response => response, /** diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue index 4001811e..30ed5762 100644 --- a/src/views/charts/keyboard.vue +++ b/src/views/charts/keyboard.vue @@ -1,8 +1,6 @@ @@ -18,8 +16,9 @@ export default { diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue index 6d62e52f..c45c3813 100644 --- a/src/views/charts/line.vue +++ b/src/views/charts/line.vue @@ -1,8 +1,6 @@ @@ -18,8 +16,9 @@ export default { diff --git a/src/views/charts/mixChart.vue b/src/views/charts/mixChart.vue index 387e2e18..1ca476e6 100644 --- a/src/views/charts/mixChart.vue +++ b/src/views/charts/mixChart.vue @@ -1,8 +1,6 @@ @@ -18,9 +16,9 @@ export default { diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue index dfc4a98c..83945235 100644 --- a/src/views/clipboard/index.vue +++ b/src/views/clipboard/index.vue @@ -2,11 +2,11 @@
- + copy - + copy diff --git a/src/views/components-demo/avatarUpload.vue b/src/views/components-demo/avatarUpload.vue index 9a98ae21..f993a4f6 100644 --- a/src/views/components-demo/avatarUpload.vue +++ b/src/views/components-demo/avatarUpload.vue @@ -1,16 +1,16 @@ diff --git a/src/views/components-demo/backToTop.vue b/src/views/components-demo/backToTop.vue index 51d7879e..6abb652a 100644 --- a/src/views/components-demo/backToTop.vue +++ b/src/views/components-demo/backToTop.vue @@ -1,134 +1,121 @@ diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue index 6af6ae2e..a31a702b 100644 --- a/src/views/components-demo/dropzone.vue +++ b/src/views/components-demo/dropzone.vue @@ -1,8 +1,8 @@