Compare commits
238 Commits
Author | SHA1 | Date |
---|---|---|
花裤衩 | b6fcfddbb0 | |
花裤衩 | ab97bc2259 | |
花裤衩 | fce7214967 | |
花裤衩 | 097ff8d91f | |
花裤衩 | 347791f319 | |
Kerollos Magdy | e7da4ea532 | |
dyz | 0d04d543a7 | |
crayymumu | c63755f4ca | |
花裤衩 | 3782a9f332 | |
花裤衩 | dc3f409986 | |
花裤衩 | e95137dc59 | |
花裤衩 | 12cd95b837 | |
花裤衩 | a9f1de65a5 | |
花裤衩 | 088172b578 | |
花裤衩 | f55dd06f5a | |
花裤衩 | fa26b7991d | |
Dihak | 81a14524d1 | |
花裤衩 | 0bb3b38fcf | |
花裤衩 | 1d22adb6fc | |
花裤衩 | f321343f09 | |
qige2016 | 215ff05bd1 | |
花裤衩 | 8c89992c6c | |
花裤衩 | bee999f291 | |
花裤衩 | e9419b6277 | |
Silentdoer | 07dec8ff47 | |
MaYuanhai | 8132ad106e | |
Cat73 | e001dab7e0 | |
花裤衩 | 6831120a83 | |
花裤衩 | e773715767 | |
花裤衩 | 05ce7ac1ec | |
花裤衩 | 8b5f4d00d6 | |
花裤衩 | 9975a7a938 | |
花裤衩 | 9d0bcf44cf | |
花裤衩 | 41c210e829 | |
Cat73 | 9b7e60c16b | |
花裤衩 | 11e6e065d0 | |
Edwin Betancourt | 0e194fea76 | |
Nickbing Lao | 7dc2c977a0 | |
cooper | 2ed1951355 | |
AiMe1991 | b8c934c81a | |
花裤衩 | fe72cae1e5 | |
garethx | d17cfd067a | |
花裤衩 | 4fedd2e8d8 | |
ntnyq | 5c6ddaad38 | |
Aisen | 2ffff40bfd | |
花裤衩 | c6266ea396 | |
Alex S | e29e5838bd | |
花裤衩 | 2975c4181a | |
花裤衩 | cd404bc128 | |
花裤衩 | 348e1bbafd | |
echofly | 43629c09c3 | |
Aisen60 | 4597711d9d | |
echofly | f788d681e6 | |
花裤衩 | 8ad5c90f8f | |
Shota Aratono | 11bcb43326 | |
RoBlues | 4a2401b574 | |
李小斐 | dc4832ad5b | |
MaYuanhai | 39b2b9b872 | |
花裤衩 | e75e9a301a | |
花裤衩 | 255989138d | |
花裤衩 | f1d5e5c19b | |
花裤衩 | a6bb84b763 | |
花裤衩 | 025d5e46a2 | |
花裤衩 | 95561d4977 | |
RussXD | ea27da43b7 | |
AndyLZC/AndyLZC.github.io | 93e01926e3 | |
Kaitian Xie | be18a69fa4 | |
任羽飞 | 1d707e4ab6 | |
韬 | 4339504db2 | |
花裤衩 | 2d27251f2e | |
花裤衩 | c656f2ed00 | |
flitrue | 230575a6fd | |
monkeycf | ded67b054a | |
xuanzai | ad444fe3ae | |
Phạm Ngọc Hòa | b2f8373a5b | |
Phạm Ngọc Hòa | b70cc183d6 | |
bbigcd | dbc41b5275 | |
Phạm Ngọc Hòa | 44f8f39465 | |
Phạm Ngọc Hòa | a4d4bc8a3e | |
Phạm Ngọc Hòa | 92a3e2da45 | |
Phạm Ngọc Hòa | 1e6aab3970 | |
Phạm Ngọc Hòa | daec48bbbe | |
花裤衩 | 1f0ac624fc | |
BradyBromley | d957bc1f4a | |
花裤衩 | 5d981eee7e | |
花裤衩 | 136d962c1e | |
花裤衩 | da5de5c689 | |
花裤衩 | 45d72a6ef5 | |
花裤衩 | fb2c852a0c | |
花裤衩 | b6929ca915 | |
花裤衩 | ae92d6f95e | |
花裤衩 | f5608a7511 | |
MaYuanhai | ce667850cf | |
花裤衩 | b7c032b509 | |
花裤衩 | a3137fb6cb | |
花裤衩 | 50dcb90b53 | |
monkeycf | ed0b023767 | |
monkeycf | 137c1c3eff | |
花裤衩 | d571715c3d | |
花裤衩 | 4342032fb9 | |
MaYuanhai | 159e21c56b | |
Serge | e4f2b1e587 | |
Francis | 6c05e7ddb9 | |
MaYuanhai | 1a83a40106 | |
花裤衩 | 1602577733 | |
Baskerville* | d747879195 | |
花裤衩 | c4b9090b0b | |
why | 7be0bd5751 | |
Pan | 9ff40abd74 | |
itsccn | 6a89136805 | |
Pan | 5d12cbd75c | |
MaYuanhai | acbbc5f52d | |
TinaryTree | e216e11618 | |
MaYuanhai | cafdbf41f2 | |
Pan | e0da0d0268 | |
Pan | b7b12acbd2 | |
肖敏 | a9e21c2ce2 | |
Jessynt | 921cdab858 | |
MaYuanhai | 440b5c6596 | |
Pan | 884587cccf | |
Pan | f1637ed780 | |
Pan | 00c853c54d | |
Serge | 686b1d37fd | |
花裤衩 | 6f45fd987d | |
花裤衩 | f1bc06b082 | |
bpzhang | 786d9662fb | |
Pan | e945c29a3c | |
花裤衩 | 3058cfefcb | |
花裤衩 | 4413d3383f | |
花裤衩 | caf7614ab2 | |
Pan | 52f56ee55f | |
Pan | 5b70eba9a0 | |
Pan | 5b1b05b18e | |
花裤衩 | cf1f40ddad | |
Pan | bd81477202 | |
花裤衩 | a582eec089 | |
Yamel Senih | c85ce21951 | |
花裤衩 | fa23feeed4 | |
花裤衩 | cdf3ea06c7 | |
花裤衩 | 73babc4880 | |
liugq | cc7554f386 | |
Pan | 4f9efc8ea4 | |
Yamel Senih | 71ece14be1 | |
Yamel Senih | d897df5e2b | |
Pan | 5f536fdfc4 | |
Pan | b6aa00d5de | |
Pan | 3281d16131 | |
Pan | 504c06f648 | |
Pan | f606b77472 | |
Pan | 63f8635538 | |
Pan | ad689e3f96 | |
花裤衩 | 6c8d7a164f | |
Pan | c2063f95fd | |
Pan | 6346ab3d80 | |
Pan | 818b565658 | |
Pan | b303d02783 | |
Pan | 8123266fe5 | |
Pan | b70718b50a | |
Pan | d9503de853 | |
Pan | 59800bfaa3 | |
Pan | 965c2eca65 | |
Pan | 1c9723949d | |
Pan | 061ab5ee6d | |
Pan | 8835c5b48f | |
Pan | ee101f4a78 | |
Pan | ffc98f6e81 | |
Pan | caffe6f470 | |
Pan | 9b68a0835e | |
Pan | 1b96709250 | |
Pan | 86fa7dd654 | |
Pan | a319df72e6 | |
Pan | 3905ce454d | |
Pan | 082b62e960 | |
Pan | ae02d6bb56 | |
Pan | 0e9f32f25a | |
Pan | 49ed3e2399 | |
Pan | ae29f1b030 | |
Pan | 93b2a6c7ad | |
Pan | 37c5c13560 | |
Pan | d48fc1e711 | |
Pan | 8f69cf7643 | |
Pan | 163a41fe8f | |
Pan | 002a525352 | |
Pan | d0c0f9313c | |
Pan | 07bcdddc45 | |
Pan | f1ed620fc2 | |
Pan | 10d9007f81 | |
Pan | 11264d163b | |
Pan | 422037372c | |
Pan | 9a32666286 | |
Pan | c39ef38f15 | |
Pan | f6ede59859 | |
Pan | 92c25dacc6 | |
Pan | e8e530de54 | |
Pan | b59d22ac18 | |
Pan | 51385c96b0 | |
Pan | 7c683b6f11 | |
Pan | 42da911819 | |
Pan | d87c1b1944 | |
Pan | 01a0d9e5f0 | |
Pan | 07cf4791dc | |
Pan | a543b0ba7c | |
Pan | ec491002f8 | |
Pan | 4cf48ca656 | |
Pan | 251d9c46d4 | |
Pan | 1166017676 | |
Pan | 0cf4f2e518 | |
Pan | 27725ac9d7 | |
Pan | 65ac600b54 | |
Pan | 1f6010612f | |
花裤衩 | 78be45fe04 | |
Pan | 67d2b38e7b | |
Pan | f7bbc6a9e9 | |
花裤衩 | c799c94da2 | |
花裤衩 | 56e9ba491f | |
花裤衩 | 648868657a | |
花裤衩 | f56385788c | |
Pan | 9563f2abe2 | |
zhaoguoweiLLHC | 9f535925a6 | |
Pan | 64e4ae7330 | |
花裤衩 | 24c29aeded | |
Pan | d0d5d91e8f | |
Pan | 7c11d5949a | |
Pan | eb6b222ad2 | |
Pan | 28f80bc7cf | |
Pan | 0a65f69cef | |
Pan | e28d3acf17 | |
Pan | a5f373dcf7 | |
Pan | 1cfcd49fe2 | |
Pan | 33ca4a3ad9 | |
Pan | 9bf85bfc97 | |
Pan | 0d38ff1c16 | |
Pan | 5935f7a56c | |
Pan | ab526d1976 | |
Pan | 641790162d | |
Pan | 95709f7369 | |
Pan | 27012a4b52 | |
Pan | 700cc822cd |
|
@ -73,8 +73,7 @@ Entendiendo y aprendiendo esto pudiera ayudarle con su proyecto.
|
|||
Sea un patrocinante y coloque su logo en nuestro LEEME en GitHub con un enlace directo a su sitio web. [[Se un Patrocinante]](https://www.patreon.com/panjiachen)
|
||||
|
||||
### Akveo
|
||||
<a href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=github_banner"><img width="500px" src="https://raw.githubusercontent.com/PanJiaChen/vue-element-admin-site/master/docs/.vuepress/public/images/vue-java-banner.png" /></a><p>Get Java backend for Vue admin with 20% discount for 39$ use coupon code SWB0RAZPZR1M
|
||||
</p>
|
||||
<a href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=github_banner"><img width="500px" src="https://raw.githubusercontent.com/PanJiaChen/vue-element-admin-site/master/docs/.vuepress/public/images/vue-java-banner.png" /></a><p>Java backend integration</p>
|
||||
|
||||
### Flatlogic
|
||||
|
||||
|
|
|
@ -70,8 +70,7 @@
|
|||
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
|
||||
|
||||
### Akveo
|
||||
<a href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=github_banner"><img width="500px" src="https://raw.githubusercontent.com/PanJiaChen/vue-element-admin-site/master/docs/.vuepress/public/images/vue-java-banner.png" /></a><p>Get Java backend for Vue admin with 20% discount for 39$ use coupon code SWB0RAZPZR1M
|
||||
</p>
|
||||
<a href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=github_banner"><img width="500px" src="https://raw.githubusercontent.com/PanJiaChen/vue-element-admin-site/master/docs/.vuepress/public/images/vue-java-banner.png" /></a><p>Java backend integration</p>
|
||||
|
||||
### Flatlogic
|
||||
|
||||
|
@ -149,7 +148,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
|
|||
|
||||
```bash
|
||||
# clone the project
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git
|
||||
|
||||
# enter the project directory
|
||||
cd vue-element-admin
|
||||
|
|
27
README.md
27
README.md
|
@ -28,28 +28,6 @@
|
|||
|
||||
English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Spanish](./README.es.md)
|
||||
|
||||
<p align="center">
|
||||
<b>SPONSORED BY</b>
|
||||
</p>
|
||||
<table align="center" cellspacing="0" cellpadding="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="middle" width="250">
|
||||
<a href="https://www.duohui.cn/?utm_source=vue-element-admin&utm_medium=web&utm_campaign=vue-element-admin_github" title="多会" target="_blank">
|
||||
<img height="60px" src="https://qiniu.cdn.duohui.co/brand/duohui.png" title="多会 - 活动服务销售平台">
|
||||
<p>活动服务销售平台</p>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle" width="250">
|
||||
<a href="https://youke.co/?utm_source=vue-element-admin&utm_medium=web&utm_campaign=vue-element-admin_github" title="有客" target="_blank">
|
||||
<img height="60px" src="https://qiniu.cdn.duohui.co/brand/youke.png" title="有客 - 客户消息直达工作群">
|
||||
<p>客户消息直达工作群</p>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Introduction
|
||||
|
||||
[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It is based on [vue](https://github.com/vuejs/vue) and uses the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
|
||||
|
@ -95,8 +73,7 @@ Understanding and learning this knowledge in advance will greatly help the use o
|
|||
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
|
||||
|
||||
### Akveo
|
||||
<a href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=github_banner"><img width="500px" src="https://raw.githubusercontent.com/PanJiaChen/vue-element-admin-site/master/docs/.vuepress/public/images/vue-java-banner.png" /></a><p>Get Java backend for Vue admin with 20% discount for 39$ use coupon code SWB0RAZPZR1M
|
||||
</p>
|
||||
<a href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=github_banner"><img width="500px" src="https://raw.githubusercontent.com/PanJiaChen/vue-element-admin-site/master/docs/.vuepress/public/images/vue-java-banner.png" /></a><p>Java backend integration</p>
|
||||
|
||||
### Flatlogic
|
||||
|
||||
|
@ -175,7 +152,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
|
|||
|
||||
```bash
|
||||
# clone the project
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git
|
||||
|
||||
# enter the project directory
|
||||
cd vue-element-admin
|
||||
|
|
|
@ -28,28 +28,6 @@
|
|||
|
||||
简体中文 | [English](./README.md) | [日本語](./README.ja.md) | [Spanish](./README.es.md)
|
||||
|
||||
<p align="center">
|
||||
<b>SPONSORED BY</b>
|
||||
</p>
|
||||
<table align="center" cellspacing="0" cellpadding="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td align="center" valign="middle" width="250">
|
||||
<a href="https://www.duohui.cn/?utm_source=vue-element-admin&utm_medium=web&utm_campaign=vue-element-admin_github" title="多会" target="_blank">
|
||||
<img height="60px" src="https://qiniu.cdn.duohui.co/brand/duohui.png" title="多会 - 活动服务销售平台">
|
||||
<p>活动服务销售平台</p>
|
||||
</a>
|
||||
</td>
|
||||
<td align="center" valign="middle" width="250">
|
||||
<a href="https://youke.co/?utm_source=vue-element-admin&utm_medium=web&utm_campaign=vue-element-admin_github" title="有客" target="_blank">
|
||||
<img height="60px" src="https://qiniu.cdn.duohui.co/brand/youke.png" title="有客 - 客户消息直达工作群">
|
||||
<p>客户消息直达工作群</p>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## 简介
|
||||
|
||||
[vue-element-admin](https://panjiachen.github.io/vue-element-admin) 是一个后台前端解决方案,它基于 [vue](https://github.com/vuejs/vue) 和 [element-ui](https://github.com/ElemeFE/element)实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件,它可以帮助你快速搭建企业级中后台产品原型。相信不管你的需求是什么,本项目都能帮助到你。
|
||||
|
@ -110,7 +88,7 @@
|
|||
Become a sponsor and get your logo on our README on GitHub with a link to your site. [[Become a sponsor]](https://www.patreon.com/panjiachen)
|
||||
|
||||
### Akveo
|
||||
<a href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=github_banner"><img width="500px" src="https://raw.githubusercontent.com/PanJiaChen/vue-element-admin-site/master/docs/.vuepress/public/images/vue-java-banner.png" /></a><p>Java 后端整合,可以使用优惠码:SWB0RAZPZR1M,获得20%的价格优化</p>
|
||||
<a href="https://store.akveo.com/products/vue-java-admin-dashboard-spring?utm_campaign=akveo_store-Vue-Vue_demo%2Fgithub&utm_source=vue_admin&utm_medium=referral&utm_content=github_banner"><img width="500px" src="https://raw.githubusercontent.com/PanJiaChen/vue-element-admin-site/master/docs/.vuepress/public/images/vue-java-banner.png" /></a><p>Java 后端整合</p>
|
||||
|
||||
### Flatlogic
|
||||
|
||||
|
@ -190,7 +168,7 @@ Become a sponsor and get your logo on our README on GitHub with a link to your s
|
|||
|
||||
```bash
|
||||
# 克隆项目
|
||||
git clone https://github.com/PanJiaChen/vue-element-admin.git
|
||||
git clone -b i18n git@github.com:PanJiaChen/vue-element-admin.git
|
||||
|
||||
# 进入项目目录
|
||||
cd vue-element-admin
|
||||
|
|
|
@ -0,0 +1,88 @@
|
|||
'use strict'
|
||||
// Template version: 1.2.6
|
||||
// see http://vuejs-templates.github.io/webpack for documentation.
|
||||
|
||||
const path = require('path')
|
||||
|
||||
module.exports = {
|
||||
dev: {
|
||||
// Paths
|
||||
assetsSubDirectory: 'static',
|
||||
assetsPublicPath: '/',
|
||||
proxyTable: {},
|
||||
|
||||
// Various Dev Server settings
|
||||
|
||||
// can be overwritten by process.env.HOST
|
||||
// if you want dev by ip, please set host: '0.0.0.0'
|
||||
host: 'localhost',
|
||||
port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
|
||||
autoOpenBrowser: true,
|
||||
errorOverlay: true,
|
||||
notifyOnErrors: false,
|
||||
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
|
||||
|
||||
// Use Eslint Loader?
|
||||
// If true, your code will be linted during bundling and
|
||||
// linting errors and warnings will be shown in the console.
|
||||
useEslint: true,
|
||||
// If true, eslint errors and warnings will also be shown in the error overlay
|
||||
// in the browser.
|
||||
showEslintErrorsInOverlay: false,
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
*/
|
||||
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
devtool: 'cheap-source-map',
|
||||
|
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
// with this option, according to the CSS-Loader README
|
||||
// (https://github.com/webpack/css-loader#sourcemaps)
|
||||
// In our experience, they generally work as expected,
|
||||
// just be aware of this issue when enabling this option.
|
||||
cssSourceMap: false
|
||||
},
|
||||
|
||||
build: {
|
||||
// Template for index.html
|
||||
index: path.resolve(__dirname, '../dist/index.html'),
|
||||
|
||||
// Paths
|
||||
assetsRoot: path.resolve(__dirname, '../dist'),
|
||||
assetsSubDirectory: 'static',
|
||||
|
||||
/**
|
||||
* You can set by youself according to actual condition
|
||||
* You will need to set this if you plan to deploy your site under a sub path,
|
||||
* for example GitHub pages. If you plan to deploy your site to https://foo.github.io/bar/,
|
||||
* then assetsPublicPath should be set to "/bar/".
|
||||
* In most cases please use '/' !!!
|
||||
*/
|
||||
assetsPublicPath: '/vue-element-admin/', // If you are deployed on the root path, please use '/'
|
||||
|
||||
/**
|
||||
* Source Maps
|
||||
*/
|
||||
productionSourceMap: false,
|
||||
// https://webpack.js.org/configuration/devtool/#production
|
||||
devtool: 'source-map',
|
||||
|
||||
// Gzip off by default as many popular static hosts such as
|
||||
// Surge or Netlify already gzip all static assets for you.
|
||||
// Before setting to `true`, make sure to:
|
||||
// npm install --save-dev compression-webpack-plugin
|
||||
productionGzip: false,
|
||||
productionGzipExtensions: ['js', 'css'],
|
||||
|
||||
// Run the build command with an extra argument to
|
||||
// View the bundle analyzer report after build finishes:
|
||||
// `npm run build:prod --report`
|
||||
// Set to `true` or `false` to always turn it on or off
|
||||
bundleAnalyzerReport: process.env.npm_config_report || false,
|
||||
|
||||
// `npm run build:prod --generate_report`
|
||||
generateAnalyzerReport: process.env.npm_config_generate_report || false
|
||||
}
|
||||
}
|
|
@ -0,0 +1,25 @@
|
|||
#!/usr/bin/env sh
|
||||
|
||||
# abort on errors
|
||||
set -e
|
||||
|
||||
# build
|
||||
npm run build:prod -- --report
|
||||
|
||||
# navigate into the build output directory
|
||||
cd dist
|
||||
|
||||
# if you are deploying to a custom domain
|
||||
# echo 'www.example.com' > CNAME
|
||||
|
||||
#创建.nojekyll 防止Github Pages build错误
|
||||
touch .nojekyll
|
||||
|
||||
git init
|
||||
git add -A
|
||||
git commit -m 'deploy'
|
||||
|
||||
# if you are deploying to https://<USERNAME>.github.io/<REPO>
|
||||
git push -f git@github.com:PanJiaChen/vue-element-admin.git master:gh-pages
|
||||
|
||||
cd -
|
|
@ -41,7 +41,7 @@ const constantRoutes = [
|
|||
path: 'dashboard',
|
||||
component: 'views/dashboard/index',
|
||||
name: 'Dashboard',
|
||||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
|
||||
meta: { title: 'dashboard', icon: 'dashboard', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -53,7 +53,7 @@ const constantRoutes = [
|
|||
path: 'index',
|
||||
component: 'views/documentation/index',
|
||||
name: 'Documentation',
|
||||
meta: { title: 'Documentation', icon: 'documentation', affix: true }
|
||||
meta: { title: 'documentation', icon: 'documentation', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -66,7 +66,7 @@ const constantRoutes = [
|
|||
path: 'index',
|
||||
component: 'views/guide/index',
|
||||
name: 'Guide',
|
||||
meta: { title: 'Guide', icon: 'guide', noCache: true }
|
||||
meta: { title: 'guide', icon: 'guide', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -79,7 +79,7 @@ const asyncRoutes = [
|
|||
redirect: '/permission/index',
|
||||
alwaysShow: true,
|
||||
meta: {
|
||||
title: 'Permission',
|
||||
title: 'permission',
|
||||
icon: 'lock',
|
||||
roles: ['admin', 'editor']
|
||||
},
|
||||
|
@ -89,7 +89,7 @@ const asyncRoutes = [
|
|||
component: 'views/permission/page',
|
||||
name: 'PagePermission',
|
||||
meta: {
|
||||
title: 'Page Permission',
|
||||
title: 'pagePermission',
|
||||
roles: ['admin']
|
||||
}
|
||||
},
|
||||
|
@ -98,7 +98,7 @@ const asyncRoutes = [
|
|||
component: 'views/permission/directive',
|
||||
name: 'DirectivePermission',
|
||||
meta: {
|
||||
title: 'Directive Permission'
|
||||
title: 'directivePermission'
|
||||
}
|
||||
},
|
||||
{
|
||||
|
@ -106,7 +106,7 @@ const asyncRoutes = [
|
|||
component: 'views/permission/role',
|
||||
name: 'RolePermission',
|
||||
meta: {
|
||||
title: 'Role Permission',
|
||||
title: 'rolePermission',
|
||||
roles: ['admin']
|
||||
}
|
||||
}
|
||||
|
@ -121,7 +121,7 @@ const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: 'views/icons/index',
|
||||
name: 'Icons',
|
||||
meta: { title: 'Icons', icon: 'icon', noCache: true }
|
||||
meta: { title: 'icons', icon: 'icon', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -132,7 +132,7 @@ const asyncRoutes = [
|
|||
redirect: 'noRedirect',
|
||||
name: 'ComponentDemo',
|
||||
meta: {
|
||||
title: 'Components',
|
||||
title: 'components',
|
||||
icon: 'component'
|
||||
},
|
||||
children: [
|
||||
|
@ -140,49 +140,49 @@ const asyncRoutes = [
|
|||
path: 'tinymce',
|
||||
component: 'views/components-demo/tinymce',
|
||||
name: 'TinymceDemo',
|
||||
meta: { title: 'Tinymce' }
|
||||
meta: { title: 'tinymce' }
|
||||
},
|
||||
{
|
||||
path: 'markdown',
|
||||
component: 'views/components-demo/markdown',
|
||||
name: 'MarkdownDemo',
|
||||
meta: { title: 'Markdown' }
|
||||
meta: { title: 'markdown' }
|
||||
},
|
||||
{
|
||||
path: 'json-editor',
|
||||
component: 'views/components-demo/json-editor',
|
||||
name: 'JsonEditorDemo',
|
||||
meta: { title: 'Json Editor' }
|
||||
meta: { title: 'jsonEditor' }
|
||||
},
|
||||
{
|
||||
path: 'split-pane',
|
||||
component: 'views/components-demo/split-pane',
|
||||
name: 'SplitpaneDemo',
|
||||
meta: { title: 'SplitPane' }
|
||||
meta: { title: 'splitPane' }
|
||||
},
|
||||
{
|
||||
path: 'avatar-upload',
|
||||
component: 'views/components-demo/avatar-upload',
|
||||
name: 'AvatarUploadDemo',
|
||||
meta: { title: 'Avatar Upload' }
|
||||
meta: { title: 'avatarUpload' }
|
||||
},
|
||||
{
|
||||
path: 'dropzone',
|
||||
component: 'views/components-demo/dropzone',
|
||||
name: 'DropzoneDemo',
|
||||
meta: { title: 'Dropzone' }
|
||||
meta: { title: 'dropzone' }
|
||||
},
|
||||
{
|
||||
path: 'sticky',
|
||||
component: 'views/components-demo/sticky',
|
||||
name: 'StickyDemo',
|
||||
meta: { title: 'Sticky' }
|
||||
meta: { title: 'sticky' }
|
||||
},
|
||||
{
|
||||
path: 'count-to',
|
||||
component: 'views/components-demo/count-to',
|
||||
name: 'CountToDemo',
|
||||
meta: { title: 'Count To' }
|
||||
meta: { title: 'countTo' }
|
||||
},
|
||||
{
|
||||
path: 'mixin',
|
||||
|
@ -194,31 +194,31 @@ const asyncRoutes = [
|
|||
path: 'back-to-top',
|
||||
component: 'views/components-demo/back-to-top',
|
||||
name: 'BackToTopDemo',
|
||||
meta: { title: 'Back To Top' }
|
||||
meta: { title: 'backToTop' }
|
||||
},
|
||||
{
|
||||
path: 'drag-dialog',
|
||||
component: 'views/components-demo/drag-dialog',
|
||||
name: 'DragDialogDemo',
|
||||
meta: { title: 'Drag Dialog' }
|
||||
meta: { title: 'dragDialog' }
|
||||
},
|
||||
{
|
||||
path: 'drag-select',
|
||||
component: 'views/components-demo/drag-select',
|
||||
name: 'DragSelectDemo',
|
||||
meta: { title: 'Drag Select' }
|
||||
meta: { title: 'dragSelect' }
|
||||
},
|
||||
{
|
||||
path: 'dnd-list',
|
||||
component: 'views/components-demo/dnd-list',
|
||||
name: 'DndListDemo',
|
||||
meta: { title: 'Dnd List' }
|
||||
meta: { title: 'dndList' }
|
||||
},
|
||||
{
|
||||
path: 'drag-kanban',
|
||||
component: 'views/components-demo/drag-kanban',
|
||||
name: 'DragKanbanDemo',
|
||||
meta: { title: 'Drag Kanban' }
|
||||
meta: { title: 'dragKanban' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -228,7 +228,7 @@ const asyncRoutes = [
|
|||
redirect: 'noRedirect',
|
||||
name: 'Charts',
|
||||
meta: {
|
||||
title: 'Charts',
|
||||
title: 'charts',
|
||||
icon: 'chart'
|
||||
},
|
||||
children: [
|
||||
|
@ -236,19 +236,19 @@ const asyncRoutes = [
|
|||
path: 'keyboard',
|
||||
component: 'views/charts/keyboard',
|
||||
name: 'KeyboardChart',
|
||||
meta: { title: 'Keyboard Chart', noCache: true }
|
||||
meta: { title: 'keyboardChart', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'line',
|
||||
component: 'views/charts/line',
|
||||
name: 'LineChart',
|
||||
meta: { title: 'Line Chart', noCache: true }
|
||||
meta: { title: 'lineChart', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'mixchart',
|
||||
component: 'views/charts/mixChart',
|
||||
name: 'MixChart',
|
||||
meta: { title: 'Mix Chart', noCache: true }
|
||||
meta: { title: 'mixChart', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -258,7 +258,7 @@ const asyncRoutes = [
|
|||
redirect: '/nested/menu1/menu1-1',
|
||||
name: 'Nested',
|
||||
meta: {
|
||||
title: 'Nested',
|
||||
title: 'nested',
|
||||
icon: 'nested'
|
||||
},
|
||||
children: [
|
||||
|
@ -266,33 +266,33 @@ const asyncRoutes = [
|
|||
path: 'menu1',
|
||||
component: 'views/nested/menu1/index',
|
||||
name: 'Menu1',
|
||||
meta: { title: 'Menu1' },
|
||||
meta: { title: 'menu1' },
|
||||
redirect: '/nested/menu1/menu1-1',
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-1',
|
||||
component: 'views/nested/menu1/menu1-1',
|
||||
name: 'Menu1-1',
|
||||
meta: { title: 'Menu1-1' }
|
||||
meta: { title: 'menu1-1' }
|
||||
},
|
||||
{
|
||||
path: 'menu1-2',
|
||||
component: 'views/nested/menu1/menu1-2',
|
||||
name: 'Menu1-2',
|
||||
redirect: '/nested/menu1/menu1-2/menu1-2-1',
|
||||
meta: { title: 'Menu1-2' },
|
||||
meta: { title: 'menu1-2' },
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-2-1',
|
||||
component: 'views/nested/menu1/menu1-2/menu1-2-1',
|
||||
name: 'Menu1-2-1',
|
||||
meta: { title: 'Menu1-2-1' }
|
||||
meta: { title: 'menu1-2-1' }
|
||||
},
|
||||
{
|
||||
path: 'menu1-2-2',
|
||||
component: 'views/nested/menu1/menu1-2/menu1-2-2',
|
||||
name: 'Menu1-2-2',
|
||||
meta: { title: 'Menu1-2-2' }
|
||||
meta: { title: 'menu1-2-2' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -300,7 +300,7 @@ const asyncRoutes = [
|
|||
path: 'menu1-3',
|
||||
component: 'views/nested/menu1/menu1-3',
|
||||
name: 'Menu1-3',
|
||||
meta: { title: 'Menu1-3' }
|
||||
meta: { title: 'menu1-3' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -308,7 +308,7 @@ const asyncRoutes = [
|
|||
path: 'menu2',
|
||||
name: 'Menu2',
|
||||
component: 'views/nested/menu2/index',
|
||||
meta: { title: 'Menu2' }
|
||||
meta: { title: 'menu2' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -319,7 +319,7 @@ const asyncRoutes = [
|
|||
redirect: '/example/list',
|
||||
name: 'Example',
|
||||
meta: {
|
||||
title: 'Example',
|
||||
title: 'example',
|
||||
icon: 'example'
|
||||
},
|
||||
children: [
|
||||
|
@ -327,20 +327,20 @@ const asyncRoutes = [
|
|||
path: 'create',
|
||||
component: 'views/example/create',
|
||||
name: 'CreateArticle',
|
||||
meta: { title: 'Create Article', icon: 'edit' }
|
||||
meta: { title: 'createArticle', icon: 'edit' }
|
||||
},
|
||||
{
|
||||
path: 'edit/:id(\\d+)',
|
||||
component: 'views/example/edit',
|
||||
name: 'EditArticle',
|
||||
meta: { title: 'Edit Article', noCache: true },
|
||||
meta: { title: 'editArticle', noCache: true },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
component: 'views/example/list',
|
||||
name: 'ArticleList',
|
||||
meta: { title: 'Article List', icon: 'list' }
|
||||
meta: { title: 'articleList', icon: 'list' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -353,7 +353,7 @@ const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: 'views/tab/index',
|
||||
name: 'Tab',
|
||||
meta: { title: 'Tab', icon: 'tab' }
|
||||
meta: { title: 'tab', icon: 'tab' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -364,7 +364,7 @@ const asyncRoutes = [
|
|||
redirect: 'noRedirect',
|
||||
name: 'ErrorPages',
|
||||
meta: {
|
||||
title: 'Error Pages',
|
||||
title: 'errorPages',
|
||||
icon: '404'
|
||||
},
|
||||
children: [
|
||||
|
@ -372,13 +372,13 @@ const asyncRoutes = [
|
|||
path: '401',
|
||||
component: 'views/error-page/401',
|
||||
name: 'Page401',
|
||||
meta: { title: 'Page 401', noCache: true }
|
||||
meta: { title: 'page401', noCache: true }
|
||||
},
|
||||
{
|
||||
path: '404',
|
||||
component: 'views/error-page/404',
|
||||
name: 'Page404',
|
||||
meta: { title: 'Page 404', noCache: true }
|
||||
meta: { title: 'page404', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -392,7 +392,7 @@ const asyncRoutes = [
|
|||
path: 'log',
|
||||
component: 'views/error-log/index',
|
||||
name: 'ErrorLog',
|
||||
meta: { title: 'Error Log', icon: 'bug' }
|
||||
meta: { title: 'errorLog', icon: 'bug' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -403,7 +403,7 @@ const asyncRoutes = [
|
|||
redirect: '/excel/export-excel',
|
||||
name: 'Excel',
|
||||
meta: {
|
||||
title: 'Excel',
|
||||
title: 'excel',
|
||||
icon: 'excel'
|
||||
},
|
||||
children: [
|
||||
|
@ -411,25 +411,25 @@ const asyncRoutes = [
|
|||
path: 'export-excel',
|
||||
component: 'views/excel/export-excel',
|
||||
name: 'ExportExcel',
|
||||
meta: { title: 'Export Excel' }
|
||||
meta: { title: 'exportExcel' }
|
||||
},
|
||||
{
|
||||
path: 'export-selected-excel',
|
||||
component: 'views/excel/select-excel',
|
||||
name: 'SelectExcel',
|
||||
meta: { title: 'Select Excel' }
|
||||
meta: { title: 'selectExcel' }
|
||||
},
|
||||
{
|
||||
path: 'export-merge-header',
|
||||
component: 'views/excel/merge-header',
|
||||
name: 'MergeHeader',
|
||||
meta: { title: 'Merge Header' }
|
||||
meta: { title: 'mergeHeader' }
|
||||
},
|
||||
{
|
||||
path: 'upload-excel',
|
||||
component: 'views/excel/upload-excel',
|
||||
name: 'UploadExcel',
|
||||
meta: { title: 'Upload Excel' }
|
||||
meta: { title: 'uploadExcel' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -439,13 +439,13 @@ const asyncRoutes = [
|
|||
component: 'layout/Layout',
|
||||
redirect: '/zip/download',
|
||||
alwaysShow: true,
|
||||
meta: { title: 'Zip', icon: 'zip' },
|
||||
meta: { title: 'zip', icon: 'zip' },
|
||||
children: [
|
||||
{
|
||||
path: 'download',
|
||||
component: 'views/zip/index',
|
||||
name: 'ExportZip',
|
||||
meta: { title: 'Export Zip' }
|
||||
meta: { title: 'exportZip' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -459,7 +459,7 @@ const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: 'views/pdf/index',
|
||||
name: 'PDF',
|
||||
meta: { title: 'PDF', icon: 'pdf' }
|
||||
meta: { title: 'pdf', icon: 'pdf' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -478,7 +478,7 @@ const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: 'views/theme/index',
|
||||
name: 'Theme',
|
||||
meta: { title: 'Theme', icon: 'theme' }
|
||||
meta: { title: 'theme', icon: 'theme' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -492,7 +492,7 @@ const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: 'views/clipboard/index',
|
||||
name: 'ClipboardDemo',
|
||||
meta: { title: 'Clipboard Demo', icon: 'clipboard' }
|
||||
meta: { title: 'clipboardDemo', icon: 'clipboard' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -505,7 +505,7 @@ const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: 'views/i18n-demo/index',
|
||||
name: 'I18n',
|
||||
meta: { title: 'I18n', icon: 'international' }
|
||||
meta: { title: 'i18n', icon: 'international' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -516,7 +516,7 @@ const asyncRoutes = [
|
|||
children: [
|
||||
{
|
||||
path: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
meta: { title: 'External Link', icon: 'link' }
|
||||
meta: { title: 'externalLink', icon: 'link' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "vue-element-admin",
|
||||
"version": "4.4.0",
|
||||
"version": "4.3.1",
|
||||
"description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
|
||||
"author": "Pan <panfree23@gmail.com>",
|
||||
"scripts": {
|
||||
|
@ -12,7 +12,8 @@
|
|||
"new": "plop",
|
||||
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
|
||||
"test:unit": "jest --clearCache && vue-cli-service test:unit",
|
||||
"test:ci": "npm run lint && npm run test:unit"
|
||||
"test:ci": "npm run lint && npm run test:unit",
|
||||
"deploy": "bash deploy.sh"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "0.18.1",
|
||||
|
@ -31,12 +32,15 @@
|
|||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
"path-to-regexp": "2.4.0",
|
||||
"pinyin": "2.9.0",
|
||||
"screenfull": "4.2.0",
|
||||
"script-loader": "0.7.2",
|
||||
"sortablejs": "1.8.4",
|
||||
"tui-editor": "1.3.3",
|
||||
"vue": "2.6.10",
|
||||
"vue-analytics": "5.16.0",
|
||||
"vue-count-to": "1.0.13",
|
||||
"vue-i18n": "7.3.2",
|
||||
"vue-router": "3.0.2",
|
||||
"vue-splitpane": "1.0.4",
|
||||
"vuedraggable": "2.20.0",
|
||||
|
|
|
@ -9,7 +9,70 @@
|
|||
<title><%= webpackConfig.name %></title>
|
||||
</head>
|
||||
<body>
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CE7IK5QY&placement=panjiachengithubio" id="_carbonads_js"></script>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<style>
|
||||
#carbonads {
|
||||
display: flex;
|
||||
max-width: 280px;
|
||||
background-color: hsl(0, 0%, 98%);
|
||||
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, .1);
|
||||
z-index: 2;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
#carbonads a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#carbonads a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#carbonads span {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#carbonads .carbon-wrap {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.carbon-img {
|
||||
display: block;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.carbon-img img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.carbon-text {
|
||||
font-size: 13px;
|
||||
padding: 10px;
|
||||
line-height: 1.4;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.carbon-poweredby {
|
||||
display: block;
|
||||
padding: 8px 10px;
|
||||
background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .5px;
|
||||
font-weight: 600;
|
||||
font-size: 9px;
|
||||
line-height: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
11
src/App.vue
11
src/App.vue
|
@ -6,6 +6,15 @@
|
|||
|
||||
<script>
|
||||
export default {
|
||||
name: 'App'
|
||||
name: 'App',
|
||||
watch: {
|
||||
'$route.path': {
|
||||
handler: function() {
|
||||
if (document.getElementById('carbonads')) {
|
||||
window._carbonads && window._carbonads.refresh()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div id="codefund" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loadSuccess: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'$route.path': {
|
||||
handler: function(val, oldVal) {
|
||||
this.getCodefund()
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCodefund()
|
||||
},
|
||||
methods: {
|
||||
getCodefund() {
|
||||
if (this.$isServer) return
|
||||
const codefundId = this.isGitee()
|
||||
? '111'
|
||||
: '96'
|
||||
const template = 'horizontal'
|
||||
axios.get(`https://codefund.io/properties/${codefundId}/funder.html?template=${template}`)
|
||||
.then(function(response) {
|
||||
document.getElementById('codefund').innerHTML = response.data
|
||||
})
|
||||
},
|
||||
isGitee() {
|
||||
const origin = window.location.origin
|
||||
if (origin.includes('gitee.io')) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
loadError(oError) {
|
||||
this.loadSuccess = false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.cf-wrapper {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.fixed-header+#codefund {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.hasTagsView {
|
||||
.fixed-header+#codefund {
|
||||
margin-top: 84px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
|
@ -2,14 +2,17 @@
|
|||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
||||
<transition-group name="breadcrumb">
|
||||
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
|
||||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
|
||||
<span v-if="item.redirect==='noRedirect'||index==levelList.length-1" class="no-redirect">
|
||||
{{ generateTitle(item.meta.title) }}
|
||||
</span>
|
||||
<a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
|
||||
</el-breadcrumb-item>
|
||||
</transition-group>
|
||||
</el-breadcrumb>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { generateTitle } from '@/utils/i18n'
|
||||
import pathToRegexp from 'path-to-regexp'
|
||||
|
||||
export default {
|
||||
|
@ -31,13 +34,14 @@ export default {
|
|||
this.getBreadcrumb()
|
||||
},
|
||||
methods: {
|
||||
generateTitle,
|
||||
getBreadcrumb() {
|
||||
// only show routes with meta.title
|
||||
let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
|
||||
const first = matched[0]
|
||||
|
||||
if (!this.isDashboard(first)) {
|
||||
matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
|
||||
matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
|
||||
}
|
||||
|
||||
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
|
||||
|
|
|
@ -22,6 +22,7 @@
|
|||
// make search results more in line with expectations
|
||||
import Fuse from 'fuse.js'
|
||||
import path from 'path'
|
||||
import i18n from '@/lang'
|
||||
|
||||
export default {
|
||||
name: 'HeaderSearch',
|
||||
|
@ -37,13 +38,26 @@ export default {
|
|||
computed: {
|
||||
routes() {
|
||||
return this.$store.getters.permission_routes
|
||||
},
|
||||
lang() {
|
||||
return this.$store.getters.language
|
||||
},
|
||||
supportPinyinSearch() {
|
||||
return this.$store.state.settings.supportPinyinSearch
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
lang() {
|
||||
this.searchPool = this.generateRoutes(this.routes)
|
||||
},
|
||||
routes() {
|
||||
this.searchPool = this.generateRoutes(this.routes)
|
||||
},
|
||||
searchPool(list) {
|
||||
// Support pinyin search
|
||||
if (this.lang === 'zh' && this.supportPinyinSearch) {
|
||||
this.addPinyinField(list)
|
||||
}
|
||||
this.initFuse(list)
|
||||
},
|
||||
show(value) {
|
||||
|
@ -58,6 +72,23 @@ export default {
|
|||
this.searchPool = this.generateRoutes(this.routes)
|
||||
},
|
||||
methods: {
|
||||
async addPinyinField(list) {
|
||||
const { default: pinyin } = await import('pinyin')
|
||||
if (Array.isArray(list)) {
|
||||
list.forEach(element => {
|
||||
const title = element.title
|
||||
if (Array.isArray(title)) {
|
||||
title.forEach(v => {
|
||||
v = pinyin(v, {
|
||||
style: pinyin.STYLE_NORMAL
|
||||
}).join('')
|
||||
element.pinyinTitle = v
|
||||
})
|
||||
}
|
||||
})
|
||||
return list
|
||||
}
|
||||
},
|
||||
click() {
|
||||
this.show = !this.show
|
||||
if (this.show) {
|
||||
|
@ -88,6 +119,9 @@ export default {
|
|||
keys: [{
|
||||
name: 'title',
|
||||
weight: 0.7
|
||||
}, {
|
||||
name: 'pinyinTitle',
|
||||
weight: 0.3
|
||||
}, {
|
||||
name: 'path',
|
||||
weight: 0.3
|
||||
|
@ -98,26 +132,23 @@ export default {
|
|||
// And generate the internationalized title
|
||||
generateRoutes(routes, basePath = '/', prefixTitle = []) {
|
||||
let res = []
|
||||
|
||||
for (const router of routes) {
|
||||
// skip hidden router
|
||||
if (router.hidden) { continue }
|
||||
|
||||
const data = {
|
||||
path: path.resolve(basePath, router.path),
|
||||
title: [...prefixTitle]
|
||||
}
|
||||
|
||||
if (router.meta && router.meta.title) {
|
||||
data.title = [...data.title, router.meta.title]
|
||||
|
||||
// generate internationalized title
|
||||
const i18ntitle = i18n.t(`route.${router.meta.title}`)
|
||||
data.title = [...data.title, i18ntitle]
|
||||
if (router.redirect !== 'noRedirect') {
|
||||
// only push the routes with title
|
||||
// special case: need to exclude parent router without redirect
|
||||
res.push(data)
|
||||
}
|
||||
}
|
||||
|
||||
// recursive child routes
|
||||
if (router.children) {
|
||||
const tempRoutes = this.generateRoutes(router.children, data.path, data.title)
|
||||
|
@ -142,13 +173,11 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.header-search {
|
||||
font-size: 0 !important;
|
||||
|
||||
.search-icon {
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.header-search-select {
|
||||
font-size: 18px;
|
||||
transition: width 0.2s;
|
||||
|
@ -169,7 +198,6 @@ export default {
|
|||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&.show {
|
||||
.header-search-select {
|
||||
width: 210px;
|
||||
|
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
|
||||
<div>
|
||||
<svg-icon class-name="international-icon" icon-class="language" />
|
||||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item :disabled="language==='zh'" command="zh">
|
||||
中文
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='en'" command="en">
|
||||
English
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='es'" command="es">
|
||||
Español
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item :disabled="language==='ja'" command="ja">
|
||||
日本語
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
computed: {
|
||||
language() {
|
||||
return this.$store.getters.language
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleSetLanguage(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('app/setLanguage', lang)
|
||||
this.$message({
|
||||
message: 'Switch Language Success',
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -71,6 +71,9 @@ export default {
|
|||
}
|
||||
},
|
||||
computed: {
|
||||
language() {
|
||||
return this.languageTypeList[this.$store.getters.language]
|
||||
},
|
||||
containerWidth() {
|
||||
const width = this.width
|
||||
if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
|
||||
|
@ -85,6 +88,10 @@ export default {
|
|||
this.$nextTick(() =>
|
||||
window.tinymce.get(this.tinymceId).setContent(val || ''))
|
||||
}
|
||||
},
|
||||
language() {
|
||||
this.destroyTinymce()
|
||||
this.$nextTick(() => this.initTinymce())
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
@ -115,8 +122,8 @@ export default {
|
|||
initTinymce() {
|
||||
const _this = this
|
||||
window.tinymce.init({
|
||||
language: this.language,
|
||||
selector: `#${this.tinymceId}`,
|
||||
language: this.languageTypeList['en'],
|
||||
height: this.height,
|
||||
body_class: 'panel-body ',
|
||||
object_resizing: false,
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1547533298036" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2337" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><defs><style type="text/css"></style></defs><path d="M799.835567 409.343969c-7.124258 0-17.45658 1.125637-26.720571 0-51.567469 15.005762-88.169085 59.042721-106.883309 106.749256-23.420409-29.151947-62.499449-52.284807-106.883309-53.374628-5.526877 1.088798-15.553231 2.187829-26.720572 0-75.839269 22.039969-132.216277 117.15628-120.243594 200.153576 32.484855 177.732937 359.762737 234.369865 360.730784 253.528204-0.968048 15.081487 15.32094-79.065753 66.802452-160.122861 51.226708-80.33977 121.281227-110.282732 106.883309-226.841402-13.123902-72.211649-76.882018-120.089076-146.96519-120.092145zM345.58176 903.057487c-0.069585 0-0.159636-0.097214-0.241501-0.152473-0.11461 0.100284-0.048095 0.152473 0.241501 0.152473z" p-id="2338"></path><path d="M733.033116 129.128963c-115.27442-8.884344-205.739804 94.891184-253.848499 173.466773-28.197202-65.910129-108.804055-148.775418-173.685761-146.778948-111.029746-0.483001-231.309156 76.278267-240.48719 213.497489C54.354955 565.682643 190.689017 610.455359 265.419022 729.590713c49.859571 75.175143 75.201749 170.110329 79.921237 173.314301 1.494027-1.316995 37.989219-12.054547 120.485095-53.222155-58.424644-36.85028-103.33346-92.574419-120.243594-160.122861-15.33015-119.972419 42.422182-261.34831 146.965189-280.216029 27.203572-11.225669 95.869465-34.045397 160.325475 26.686802 29.960359-66.275449 71.678506-82.142835 120.243595-93.405343 9.8176-1.951445 23.158443-3.786233 40.080858 0 53.009308-3.783163 105.278765 18.951631 146.965189 53.374628-2.736321-9.131985-1.047866-20.48352 0-26.686802 7.274684-149.553131-88.768743-228.409107-227.12895-240.184291z" p-id="2339"></path></svg>
|
After Width: | Height: | Size: 1.9 KiB |
|
@ -0,0 +1,176 @@
|
|||
export default {
|
||||
route: {
|
||||
dashboard: 'Dashboard',
|
||||
documentation: 'Documentation',
|
||||
guide: 'Guide',
|
||||
permission: 'Permission',
|
||||
pagePermission: 'Page Permission',
|
||||
rolePermission: 'Role Permission',
|
||||
directivePermission: 'Directive Permission',
|
||||
icons: 'Icons',
|
||||
components: 'Components',
|
||||
tinymce: 'Tinymce',
|
||||
markdown: 'Markdown',
|
||||
jsonEditor: 'JSON Editor',
|
||||
dndList: 'Dnd List',
|
||||
splitPane: 'SplitPane',
|
||||
avatarUpload: 'Avatar Upload',
|
||||
dropzone: 'Dropzone',
|
||||
sticky: 'Sticky',
|
||||
countTo: 'Count To',
|
||||
componentMixin: 'Mixin',
|
||||
backToTop: 'Back To Top',
|
||||
dragDialog: 'Drag Dialog',
|
||||
dragSelect: 'Drag Select',
|
||||
dragKanban: 'Drag Kanban',
|
||||
charts: 'Charts',
|
||||
keyboardChart: 'Keyboard Chart',
|
||||
lineChart: 'Line Chart',
|
||||
mixChart: 'Mix Chart',
|
||||
example: 'Example',
|
||||
nested: 'Nested Routes',
|
||||
menu1: 'Menu 1',
|
||||
'menu1-1': 'Menu 1-1',
|
||||
'menu1-2': 'Menu 1-2',
|
||||
'menu1-2-1': 'Menu 1-2-1',
|
||||
'menu1-2-2': 'Menu 1-2-2',
|
||||
'menu1-3': 'Menu 1-3',
|
||||
menu2: 'Menu 2',
|
||||
Table: 'Table',
|
||||
dynamicTable: 'Dynamic Table',
|
||||
dragTable: 'Drag Table',
|
||||
inlineEditTable: 'Inline Edit',
|
||||
complexTable: 'Complex Table',
|
||||
tab: 'Tab',
|
||||
form: 'Form',
|
||||
createArticle: 'Create Article',
|
||||
editArticle: 'Edit Article',
|
||||
articleList: 'Article List',
|
||||
errorPages: 'Error Pages',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
errorLog: 'Error Log',
|
||||
excel: 'Excel',
|
||||
exportExcel: 'Export Excel',
|
||||
selectExcel: 'Export Selected',
|
||||
mergeHeader: 'Merge Header',
|
||||
uploadExcel: 'Upload Excel',
|
||||
zip: 'Zip',
|
||||
pdf: 'PDF',
|
||||
exportZip: 'Export Zip',
|
||||
theme: 'Theme',
|
||||
clipboardDemo: 'Clipboard',
|
||||
i18n: 'I18n',
|
||||
externalLink: 'External Link',
|
||||
donate: 'Donate',
|
||||
profile: 'Profile'
|
||||
},
|
||||
navbar: {
|
||||
dashboard: 'Dashboard',
|
||||
github: 'Github',
|
||||
logOut: 'Log Out',
|
||||
profile: 'Profile',
|
||||
theme: 'Theme',
|
||||
size: 'Global Size'
|
||||
},
|
||||
login: {
|
||||
title: 'Login Form',
|
||||
logIn: 'Login',
|
||||
username: 'Username',
|
||||
password: 'Password',
|
||||
any: 'any',
|
||||
thirdparty: 'Or connect with',
|
||||
thirdpartyTips: 'Can not be simulated on local, so please combine you own business simulation! ! !'
|
||||
},
|
||||
documentation: {
|
||||
documentation: 'Documentation',
|
||||
github: 'Github Repository'
|
||||
},
|
||||
permission: {
|
||||
addRole: 'New Role',
|
||||
editPermission: 'Edit',
|
||||
roles: 'Your roles',
|
||||
switchRoles: 'Switch roles',
|
||||
tips: 'In some cases, using v-permission will have no effect. For example: Element-UI el-tab or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.',
|
||||
delete: 'Delete',
|
||||
confirm: 'Confirm',
|
||||
cancel: 'Cancel'
|
||||
},
|
||||
guide: {
|
||||
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
|
||||
button: 'Show Guide'
|
||||
},
|
||||
components: {
|
||||
documentation: 'Documentation',
|
||||
tinymceTips: 'Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.',
|
||||
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'
|
||||
},
|
||||
example: {
|
||||
warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
|
||||
},
|
||||
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)'
|
||||
},
|
||||
pdf: {
|
||||
tips: 'Here we use window.print() to implement the feature of downloading PDF.'
|
||||
},
|
||||
theme: {
|
||||
change: 'Change Theme',
|
||||
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.'
|
||||
},
|
||||
tagsView: {
|
||||
refresh: 'Refresh',
|
||||
close: 'Close',
|
||||
closeOthers: 'Close Others',
|
||||
closeAll: 'Close All'
|
||||
},
|
||||
settings: {
|
||||
title: 'Page style setting',
|
||||
theme: 'Theme Color',
|
||||
tagsView: 'Open Tags-View',
|
||||
fixedHeader: 'Fixed Header',
|
||||
sidebarLogo: 'Sidebar Logo'
|
||||
}
|
||||
}
|
|
@ -0,0 +1,176 @@
|
|||
export default {
|
||||
route: {
|
||||
dashboard: 'Panel de control',
|
||||
documentation: 'Documentación',
|
||||
guide: 'Guía',
|
||||
permission: 'Permisos',
|
||||
rolePermission: 'Permisos de rol',
|
||||
pagePermission: 'Permisos de la página',
|
||||
directivePermission: 'Permisos de la directiva',
|
||||
icons: 'Iconos',
|
||||
components: 'Componentes',
|
||||
tinymce: 'Tinymce',
|
||||
markdown: 'Markdown',
|
||||
jsonEditor: 'Editor JSON',
|
||||
dndList: 'Lista Dnd',
|
||||
splitPane: 'Panel dividido',
|
||||
avatarUpload: 'Subir avatar',
|
||||
dropzone: 'Subir ficheros',
|
||||
sticky: 'Sticky',
|
||||
countTo: 'CountTo',
|
||||
componentMixin: 'Mixin',
|
||||
backToTop: 'Ir arriba',
|
||||
dragDialog: 'Drag Dialog',
|
||||
dragSelect: 'Drag Select',
|
||||
dragKanban: 'Drag Kanban',
|
||||
charts: 'Gráficos',
|
||||
keyboardChart: 'Keyboard Chart',
|
||||
lineChart: 'Gráfico de líneas',
|
||||
mixChart: 'Mix Chart',
|
||||
example: 'Ejemplo',
|
||||
nested: 'Rutas anidadass',
|
||||
menu1: 'Menu 1',
|
||||
'menu1-1': 'Menu 1-1',
|
||||
'menu1-2': 'Menu 1-2',
|
||||
'menu1-2-1': 'Menu 1-2-1',
|
||||
'menu1-2-2': 'Menu 1-2-2',
|
||||
'menu1-3': 'Menu 1-3',
|
||||
menu2: 'Menu 2',
|
||||
Table: 'Tabla',
|
||||
dynamicTable: 'Tabla dinámica',
|
||||
dragTable: 'Arrastrar tabla',
|
||||
inlineEditTable: 'Editor',
|
||||
complexTable: 'Complex Table',
|
||||
tab: 'Pestaña',
|
||||
form: 'Formulario',
|
||||
createArticle: 'Crear artículo',
|
||||
editArticle: 'Editar artículo',
|
||||
articleList: 'Listado de artículos',
|
||||
errorPages: 'Páginas de error',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
errorLog: 'Registro de errores',
|
||||
excel: 'Excel',
|
||||
exportExcel: 'Exportar a Excel',
|
||||
selectExcel: 'Export seleccionado',
|
||||
mergeHeader: 'Merge Header',
|
||||
uploadExcel: 'Subir Excel',
|
||||
zip: 'Zip',
|
||||
pdf: 'PDF',
|
||||
exportZip: 'Exportar a Zip',
|
||||
theme: 'Tema',
|
||||
clipboardDemo: 'Clipboard',
|
||||
i18n: 'I18n',
|
||||
externalLink: 'Enlace externo',
|
||||
donate: 'Donate',
|
||||
profile: 'Profile'
|
||||
},
|
||||
navbar: {
|
||||
logOut: 'Salir',
|
||||
dashboard: 'Panel de control',
|
||||
github: 'Github',
|
||||
theme: 'Tema',
|
||||
size: 'Tamaño global',
|
||||
profile: 'Profile'
|
||||
},
|
||||
login: {
|
||||
title: 'Formulario de acceso',
|
||||
logIn: 'Acceso',
|
||||
username: 'Usuario',
|
||||
password: 'Contraseña',
|
||||
any: 'nada',
|
||||
thirdparty: 'Conectar con',
|
||||
thirdpartyTips: 'No se puede simular en local, así que combine su propia simulación de negocios. ! !'
|
||||
},
|
||||
documentation: {
|
||||
documentation: 'Documentación',
|
||||
github: 'Repositorio Github'
|
||||
},
|
||||
permission: {
|
||||
addRole: 'Nuevo rol',
|
||||
editPermission: 'Permiso de edición',
|
||||
roles: 'Tus permisos',
|
||||
switchRoles: 'Cambiar permisos',
|
||||
tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.',
|
||||
delete: 'Borrar',
|
||||
confirm: 'Confirmar',
|
||||
cancel: 'Cancelar'
|
||||
},
|
||||
guide: {
|
||||
description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ',
|
||||
button: 'Ver guía'
|
||||
},
|
||||
components: {
|
||||
documentation: 'Documentación',
|
||||
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: 'Orden por defecto',
|
||||
dragTips2: 'The after dragging order',
|
||||
title: 'Título',
|
||||
importance: 'Importancia',
|
||||
type: 'Tipo',
|
||||
remark: 'Remark',
|
||||
search: 'Buscar',
|
||||
add: 'Añadir',
|
||||
export: 'Exportar',
|
||||
reviewer: 'reviewer',
|
||||
id: 'ID',
|
||||
date: 'Fecha',
|
||||
author: 'Autor',
|
||||
readings: 'Lector',
|
||||
status: 'Estado',
|
||||
actions: 'Acciones',
|
||||
edit: 'Editar',
|
||||
publish: 'Publicar',
|
||||
draft: 'Draft',
|
||||
delete: 'Eliminar',
|
||||
cancel: 'Cancelar',
|
||||
confirm: 'Confirmar'
|
||||
},
|
||||
example: {
|
||||
warning: 'Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all pages directly. See details'
|
||||
},
|
||||
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: 'Documento de introducción'
|
||||
},
|
||||
excel: {
|
||||
export: 'Exportar',
|
||||
selectedExport: 'Exportar seleccionados',
|
||||
placeholder: 'Por favor escribe un nombre de fichero'
|
||||
},
|
||||
zip: {
|
||||
export: 'Exportar',
|
||||
placeholder: 'Por favor escribe un nombre de fichero'
|
||||
},
|
||||
pdf: {
|
||||
tips: 'Here we use window.print() to implement the feature of downloading pdf.'
|
||||
},
|
||||
theme: {
|
||||
change: 'Cambiar tema',
|
||||
documentation: 'Documentación del tema',
|
||||
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.'
|
||||
},
|
||||
tagsView: {
|
||||
refresh: 'Actualizar',
|
||||
close: 'Cerrar',
|
||||
closeOthers: 'Cerrar otros',
|
||||
closeAll: 'Cerrar todos'
|
||||
},
|
||||
settings: {
|
||||
title: 'Page style setting',
|
||||
theme: 'Theme Color',
|
||||
tagsView: 'Open Tags-View',
|
||||
fixedHeader: 'Fixed Header',
|
||||
sidebarLogo: 'Sidebar Logo'
|
||||
}
|
||||
}
|
|
@ -0,0 +1,55 @@
|
|||
import Vue from 'vue'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import Cookies from 'js-cookie'
|
||||
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
|
||||
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
|
||||
import elementEsLocale from 'element-ui/lib/locale/lang/es'// element-ui lang
|
||||
import elementJaLocale from 'element-ui/lib/locale/lang/ja'// element-ui lang
|
||||
import enLocale from './en'
|
||||
import zhLocale from './zh'
|
||||
import esLocale from './es'
|
||||
import jaLocale from './ja'
|
||||
|
||||
Vue.use(VueI18n)
|
||||
|
||||
const messages = {
|
||||
en: {
|
||||
...enLocale,
|
||||
...elementEnLocale
|
||||
},
|
||||
zh: {
|
||||
...zhLocale,
|
||||
...elementZhLocale
|
||||
},
|
||||
es: {
|
||||
...esLocale,
|
||||
...elementEsLocale
|
||||
},
|
||||
ja: {
|
||||
...jaLocale,
|
||||
...elementJaLocale
|
||||
}
|
||||
}
|
||||
export function getLanguage() {
|
||||
const chooseLanguage = Cookies.get('language')
|
||||
if (chooseLanguage) return chooseLanguage
|
||||
|
||||
// if has not choose language
|
||||
const language = (navigator.language || navigator.browserLanguage).toLowerCase()
|
||||
const locales = Object.keys(messages)
|
||||
for (const locale of locales) {
|
||||
if (language.indexOf(locale) > -1) {
|
||||
return locale
|
||||
}
|
||||
}
|
||||
return 'en'
|
||||
}
|
||||
const i18n = new VueI18n({
|
||||
// set locale
|
||||
// options: en | zh | es
|
||||
locale: getLanguage(),
|
||||
// set locale messages
|
||||
messages
|
||||
})
|
||||
|
||||
export default i18n
|
|
@ -0,0 +1,175 @@
|
|||
export default {
|
||||
route: {
|
||||
dashboard: 'トップ',
|
||||
documentation: 'ドキュメント',
|
||||
guide: 'ガイド',
|
||||
permission: '権限',
|
||||
rolePermission: '権限ロール',
|
||||
pagePermission: 'ページ権限',
|
||||
directivePermission: 'ディレクティブ権限',
|
||||
icons: 'アイコン',
|
||||
components: 'コンポーネント',
|
||||
tinymce: 'TinyMCE',
|
||||
markdown: 'Markdown',
|
||||
jsonEditor: 'JSON Editor',
|
||||
dndList: 'Drag-And-Drop',
|
||||
splitPane: 'パネル',
|
||||
avatarUpload: 'アバターアップロード',
|
||||
dropzone: 'Dropzone',
|
||||
sticky: 'Sticky',
|
||||
countTo: 'Count To',
|
||||
componentMixin: 'コンポーネントMixin',
|
||||
backToTop: 'BackToTop',
|
||||
dragDialog: 'Drag Dialog',
|
||||
dragSelect: 'Drag Select',
|
||||
dragKanban: 'Drag 看板',
|
||||
charts: 'チャート',
|
||||
keyboardChart: 'Keyboardチャート',
|
||||
lineChart: 'Lineチャート',
|
||||
mixChart: 'Mixチャート',
|
||||
example: 'Example',
|
||||
nested: 'Nested Routes',
|
||||
menu1: 'メニュー1',
|
||||
'menu1-1': 'メニュー 1-1',
|
||||
'menu1-2': 'メニュー 1-2',
|
||||
'menu1-2-1': 'メニュー 1-2-1',
|
||||
'menu1-2-2': 'メニュー 1-2-2',
|
||||
'menu1-3': 'メニュー 1-3',
|
||||
menu2: 'メニュー 2',
|
||||
Table: 'Table',
|
||||
dynamicTable: '可変 Table',
|
||||
dragTable: 'Drag Table',
|
||||
inlineEditTable: 'Inline Edit Table',
|
||||
complexTable: 'Complex Table',
|
||||
tab: 'Tab',
|
||||
form: 'フォーム',
|
||||
createArticle: '投稿作成',
|
||||
editArticle: '投稿編集',
|
||||
articleList: '投稿リスト',
|
||||
errorPages: 'エラーページ',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
errorLog: 'エラーログ',
|
||||
excel: 'Excel',
|
||||
exportExcel: '一括エクスポート',
|
||||
selectExcel: '複数選択エクスポート',
|
||||
mergeHeader: 'ヘッダーマージ',
|
||||
uploadExcel: 'アップロード',
|
||||
zip: 'Zip',
|
||||
pdf: 'PDF',
|
||||
exportZip: 'Export Zip',
|
||||
theme: 'テーマ変更',
|
||||
clipboardDemo: 'Clipboard',
|
||||
i18n: '多言語',
|
||||
externalLink: '外部リンク',
|
||||
profile: 'プロフィール'
|
||||
},
|
||||
navbar: {
|
||||
dashboard: 'トップ',
|
||||
github: 'GitHub',
|
||||
logOut: 'ログアウト',
|
||||
profile: 'プロフィール',
|
||||
theme: 'テーマ変更',
|
||||
size: '画面サイズ'
|
||||
},
|
||||
login: {
|
||||
title: 'ユーザログイン',
|
||||
logIn: 'ログイン',
|
||||
username: 'ユーザ名',
|
||||
password: 'パスワード',
|
||||
any: 'password',
|
||||
thirdparty: '外部IDでログイン',
|
||||
thirdpartyTips: 'ローカル環境ではログインできません。実装が必要です。'
|
||||
},
|
||||
documentation: {
|
||||
documentation: 'ドキュメント',
|
||||
github: 'Github Link'
|
||||
},
|
||||
permission: {
|
||||
addRole: 'ロール追加',
|
||||
editPermission: 'ロール変更',
|
||||
roles: 'ロール',
|
||||
switchRoles: 'ロール切替',
|
||||
tips: 'v-permissionは使えない時があります。例えば: Element-UI の el-tab、 el-table-column 及び他の dom。v-ifを使う必要があります。',
|
||||
delete: '削除',
|
||||
confirm: '確認',
|
||||
cancel: 'キャンセル'
|
||||
},
|
||||
guide: {
|
||||
description: 'ガイドは各機能の説明です。',
|
||||
button: 'ガイドを見る'
|
||||
},
|
||||
components: {
|
||||
documentation: 'ドキュメント',
|
||||
tinymceTips: 'tinymceは管理画面に重要な機能ですが、その同時に落とし穴がありあす。tinymceを使う道のりが大変でした。Tinymceを使う時に各自のプロジェクト状況で判断が必要です。ドキュメントはこちら',
|
||||
dropzoneTips: 'Third partyのパッケージを使わず、独自の実装しています。詳細は @/components/Dropzone',
|
||||
stickyTips: 'ページの指定位置へスクロールした場合、表示されます。',
|
||||
backToTopTips1: 'トップへスクロールが表示されます。',
|
||||
backToTopTips2: 'ボタンのスタイルはカスタマイズできます。例えば、show/hide、height、position。 またはElementのel-tooltipを使って、ツールチップを実装できます。',
|
||||
imageUploadTips: 'mockjsは使えないため、カスタマイズしています。公式の最新バージョンを使ってください。'
|
||||
},
|
||||
table: {
|
||||
dynamicTips1: '先頭は固定、最後に追加',
|
||||
dynamicTips2: '戦後に追加せず、指定列に追加',
|
||||
dragTips1: 'デフォルト順番',
|
||||
dragTips2: 'Drag後の順番',
|
||||
title: 'タイトル',
|
||||
importance: '重要',
|
||||
type: 'タイプ',
|
||||
remark: '評価',
|
||||
search: '検索',
|
||||
add: '追加',
|
||||
export: 'エクスポート',
|
||||
reviewer: 'レビュアー',
|
||||
id: '番号',
|
||||
date: '日時',
|
||||
author: '作成者',
|
||||
readings: '閲覧数',
|
||||
status: 'ステータス',
|
||||
actions: '操作',
|
||||
edit: '編集',
|
||||
publish: '公開',
|
||||
draft: '下書き',
|
||||
delete: 'キャンセル',
|
||||
cancel: 'キャンセル',
|
||||
confirm: '確認'
|
||||
},
|
||||
example: {
|
||||
warning: '新規作成と編集画面は keep-alive を使えないです。keep-alive の include はrouteのキャッシュは使えないです。そのため、component name を使ってキャッシュさせるようにします。このようなキャッシュ機能を作りたい場合,localStorageを使う手があります。もしくは keep-alive の includeを使って、全ページキャッシュする方法はあります。'
|
||||
},
|
||||
errorLog: {
|
||||
tips: '右上のbugアイコンをクリックしてください。',
|
||||
description: '管理画面はspaを使う場合が多い、ユーザ体現向上はできますが、想定外エラーが発生する場合があります。Vueはそのエラーハンドリング機能を提供し、エラーレポートができます。',
|
||||
documentation: 'ドキュメント'
|
||||
},
|
||||
excel: {
|
||||
export: 'エクスポート',
|
||||
selectedExport: 'エクスポート対象を選択してください。',
|
||||
placeholder: 'ファイル名を入力してください。'
|
||||
},
|
||||
zip: {
|
||||
export: 'エクスポート',
|
||||
placeholder: 'ファイル名を入力してください。'
|
||||
},
|
||||
pdf: {
|
||||
tips: 'window.print() を使ってPDFダウンロードしています。'
|
||||
},
|
||||
theme: {
|
||||
change: 'テーマ切替',
|
||||
documentation: 'ドキュメント',
|
||||
tips: 'Tips: テーマの切り替え方法はnavbarのtheme-pickと異なります、使い方はドキュメントを確認してください。'
|
||||
},
|
||||
tagsView: {
|
||||
refresh: '更新',
|
||||
close: '閉じる',
|
||||
closeOthers: 'その他閉じる',
|
||||
closeAll: 'すべて閉じる'
|
||||
},
|
||||
settings: {
|
||||
title: 'システムテーマ',
|
||||
theme: 'テーマ色',
|
||||
tagsView: 'Tags-View 開く',
|
||||
fixedHeader: 'Fixed Header',
|
||||
sidebarLogo: 'Sidebar Logo'
|
||||
}
|
||||
}
|
|
@ -0,0 +1,176 @@
|
|||
export default {
|
||||
route: {
|
||||
dashboard: '首页',
|
||||
documentation: '文档',
|
||||
guide: '引导页',
|
||||
permission: '权限测试页',
|
||||
rolePermission: '角色权限',
|
||||
pagePermission: '页面权限',
|
||||
directivePermission: '指令权限',
|
||||
icons: '图标',
|
||||
components: '组件',
|
||||
tinymce: '富文本编辑器',
|
||||
markdown: 'Markdown',
|
||||
jsonEditor: 'JSON 编辑器',
|
||||
dndList: '列表拖拽',
|
||||
splitPane: 'Splitpane',
|
||||
avatarUpload: '头像上传',
|
||||
dropzone: 'Dropzone',
|
||||
sticky: 'Sticky',
|
||||
countTo: 'Count To',
|
||||
componentMixin: '小组件',
|
||||
backToTop: '返回顶部',
|
||||
dragDialog: '拖拽 Dialog',
|
||||
dragSelect: '拖拽 Select',
|
||||
dragKanban: '可拖拽看板',
|
||||
charts: '图表',
|
||||
keyboardChart: '键盘图表',
|
||||
lineChart: '折线图',
|
||||
mixChart: '混合图表',
|
||||
example: '综合实例',
|
||||
nested: '路由嵌套',
|
||||
menu1: '菜单1',
|
||||
'menu1-1': '菜单 1-1',
|
||||
'menu1-2': '菜单 1-2',
|
||||
'menu1-2-1': '菜单 1-2-1',
|
||||
'menu1-2-2': '菜单 1-2-2',
|
||||
'menu1-3': '菜单 1-3',
|
||||
menu2: '菜单 2',
|
||||
Table: 'Table',
|
||||
dynamicTable: '动态 Table',
|
||||
dragTable: '拖拽 Table',
|
||||
inlineEditTable: 'Table 内编辑',
|
||||
complexTable: '综合 Table',
|
||||
tab: 'Tab',
|
||||
form: '表单',
|
||||
createArticle: '创建文章',
|
||||
editArticle: '编辑文章',
|
||||
articleList: '文章列表',
|
||||
errorPages: '错误页面',
|
||||
page401: '401',
|
||||
page404: '404',
|
||||
errorLog: '错误日志',
|
||||
excel: 'Excel',
|
||||
exportExcel: '导出 Excel',
|
||||
selectExcel: '导出 已选择项',
|
||||
mergeHeader: '导出 多级表头',
|
||||
uploadExcel: '上传 Excel',
|
||||
zip: 'Zip',
|
||||
pdf: 'PDF',
|
||||
exportZip: 'Export Zip',
|
||||
theme: '换肤',
|
||||
clipboardDemo: 'Clipboard',
|
||||
i18n: '国际化',
|
||||
externalLink: '外链',
|
||||
donate: '打赏',
|
||||
profile: '个人中心'
|
||||
},
|
||||
navbar: {
|
||||
dashboard: '首页',
|
||||
github: '项目地址',
|
||||
logOut: '退出登录',
|
||||
profile: '个人中心',
|
||||
theme: '换肤',
|
||||
size: '布局大小'
|
||||
},
|
||||
login: {
|
||||
title: '系统登录',
|
||||
logIn: '登录',
|
||||
username: '账号',
|
||||
password: '密码',
|
||||
any: '随便填',
|
||||
thirdparty: '第三方登录',
|
||||
thirdpartyTips: '本地不能模拟,请结合自己业务进行模拟!!!'
|
||||
},
|
||||
documentation: {
|
||||
documentation: '文档',
|
||||
github: 'Github 地址'
|
||||
},
|
||||
permission: {
|
||||
addRole: '新增角色',
|
||||
editPermission: '编辑权限',
|
||||
roles: '你的权限',
|
||||
switchRoles: '切换权限',
|
||||
tips: '在某些情况下,不适合使用 v-permission。例如:Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。',
|
||||
delete: '删除',
|
||||
confirm: '确定',
|
||||
cancel: '取消'
|
||||
},
|
||||
guide: {
|
||||
description: '引导页对于一些第一次进入项目的人很有用,你可以简单介绍下项目的功能。本 Demo 是基于',
|
||||
button: '打开引导'
|
||||
},
|
||||
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: '确 定'
|
||||
},
|
||||
example: {
|
||||
warning: '创建和编辑页面是不能被 keep-alive 缓存的,因为keep-alive 的 include 目前不支持根据路由来缓存,所以目前都是基于 component name 来进行缓存的。如果你想类似的实现缓存效果,可以使用 localStorage 等浏览器缓存方案。或者不要使用 keep-alive 的 include,直接缓存所有页面。详情见'
|
||||
},
|
||||
errorLog: {
|
||||
tips: '请点击右上角bug小图标',
|
||||
description: '现在的管理后台基本都是spa的形式了,它增强了用户体验,但同时也会增加页面出问题的可能性,可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常,你可以在其中进行错误处理或者异常上报。',
|
||||
documentation: '文档介绍'
|
||||
},
|
||||
excel: {
|
||||
export: '导出',
|
||||
selectedExport: '导出已选择项',
|
||||
placeholder: '请输入文件名(默认excel-list)'
|
||||
},
|
||||
zip: {
|
||||
export: '导出',
|
||||
placeholder: '请输入文件名(默认file)'
|
||||
},
|
||||
pdf: {
|
||||
tips: '这里使用 window.print() 来实现下载pdf的功能'
|
||||
},
|
||||
theme: {
|
||||
change: '换肤',
|
||||
documentation: '换肤文档',
|
||||
tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法,各自有不同的应用场景,具体请参考文档。'
|
||||
},
|
||||
tagsView: {
|
||||
refresh: '刷新',
|
||||
close: '关闭',
|
||||
closeOthers: '关闭其它',
|
||||
closeAll: '关闭所有'
|
||||
},
|
||||
settings: {
|
||||
title: '系统布局配置',
|
||||
theme: '主题色',
|
||||
tagsView: '开启 Tags-View',
|
||||
fixedHeader: '固定 Header',
|
||||
sidebarLogo: '侧边栏 Logo'
|
||||
}
|
||||
}
|
|
@ -25,7 +25,7 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.app-main {
|
||||
/* 50= navbar 50 */
|
||||
min-height: calc(100vh - 50px);
|
||||
min-height: calc(100vh - 50px - 43px);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
@ -38,7 +38,7 @@ export default {
|
|||
.hasTagsView {
|
||||
.app-main {
|
||||
/* 84 = navbar + tags-view = 50 + 34 */
|
||||
min-height: calc(100vh - 84px);
|
||||
min-height: calc(100vh - 84px - 43px);
|
||||
}
|
||||
|
||||
.fixed-header+.app-main {
|
||||
|
|
|
@ -12,10 +12,12 @@
|
|||
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect" />
|
||||
|
||||
<el-tooltip content="Global Size" effect="dark" placement="bottom">
|
||||
<el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
|
||||
<size-select id="size-select" class="right-menu-item hover-effect" />
|
||||
</el-tooltip>
|
||||
|
||||
<lang-select class="right-menu-item hover-effect" />
|
||||
|
||||
</template>
|
||||
|
||||
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
|
||||
|
@ -25,19 +27,25 @@
|
|||
</div>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<router-link to="/profile/index">
|
||||
<el-dropdown-item>Profile</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
{{ $t('navbar.profile') }}
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<router-link to="/">
|
||||
<el-dropdown-item>Dashboard</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
{{ $t('navbar.dashboard') }}
|
||||
</el-dropdown-item>
|
||||
</router-link>
|
||||
<a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
|
||||
<el-dropdown-item>Github</el-dropdown-item>
|
||||
<el-dropdown-item>
|
||||
{{ $t('navbar.github') }}
|
||||
</el-dropdown-item>
|
||||
</a>
|
||||
<a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
|
||||
<el-dropdown-item>Docs</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item divided @click.native="logout">
|
||||
<span style="display:block;">Log Out</span>
|
||||
<span style="display:block;">{{ $t('navbar.logOut') }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
@ -52,6 +60,7 @@ import Hamburger from '@/components/Hamburger'
|
|||
import ErrorLog from '@/components/ErrorLog'
|
||||
import Screenfull from '@/components/Screenfull'
|
||||
import SizeSelect from '@/components/SizeSelect'
|
||||
import LangSelect from '@/components/LangSelect'
|
||||
import Search from '@/components/HeaderSearch'
|
||||
|
||||
export default {
|
||||
|
@ -61,6 +70,7 @@ export default {
|
|||
ErrorLog,
|
||||
Screenfull,
|
||||
SizeSelect,
|
||||
LangSelect,
|
||||
Search
|
||||
},
|
||||
computed: {
|
||||
|
|
|
@ -1,27 +1,39 @@
|
|||
<template>
|
||||
<div class="drawer-container">
|
||||
<div>
|
||||
<h3 class="drawer-title">Page style setting</h3>
|
||||
<h3 class="drawer-title">{{ $t('settings.title') }}</h3>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>Theme Color</span>
|
||||
<span>{{ $t('settings.theme') }}</span>
|
||||
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>Open Tags-View</span>
|
||||
<span>{{ $t('settings.tagsView') }}</span>
|
||||
<el-switch v-model="tagsView" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>Fixed Header</span>
|
||||
<span>{{ $t('settings.fixedHeader') }}</span>
|
||||
<el-switch v-model="fixedHeader" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
<div class="drawer-item">
|
||||
<span>Sidebar Logo</span>
|
||||
<span>{{ $t('settings.sidebarLogo') }}</span>
|
||||
<el-switch v-model="sidebarLogo" class="drawer-switch" />
|
||||
</div>
|
||||
<a v-if="isShowJob" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/" target="_blank" class="job-link">
|
||||
<el-alert
|
||||
title="部门目前非常缺人!有兴趣的可以点击了解详情。坐标: 字节跳动"
|
||||
type="success"
|
||||
:closable="false"
|
||||
/>
|
||||
</a>
|
||||
|
||||
<div v-if="lang === 'zh'" class="drawer-item">
|
||||
<span>菜单支持拼音搜索</span>
|
||||
<el-switch v-model="supportPinyinSearch" class="drawer-switch" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
@ -36,6 +48,9 @@ export default {
|
|||
return {}
|
||||
},
|
||||
computed: {
|
||||
isShowJob() {
|
||||
return this.$store.getters.language === 'zh'
|
||||
},
|
||||
fixedHeader: {
|
||||
get() {
|
||||
return this.$store.state.settings.fixedHeader
|
||||
|
@ -68,6 +83,20 @@ export default {
|
|||
value: val
|
||||
})
|
||||
}
|
||||
},
|
||||
supportPinyinSearch: {
|
||||
get() {
|
||||
return this.$store.state.settings.supportPinyinSearch
|
||||
},
|
||||
set(val) {
|
||||
this.$store.dispatch('settings/changeSetting', {
|
||||
key: 'supportPinyinSearch',
|
||||
value: val
|
||||
})
|
||||
}
|
||||
},
|
||||
lang() {
|
||||
return this.$store.getters.language
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -104,5 +133,13 @@ export default {
|
|||
.drawer-switch {
|
||||
float: right
|
||||
}
|
||||
|
||||
.job-link{
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -3,14 +3,14 @@
|
|||
<template v-if="hasOneShowingChild(item.children,item) && (!onlyOneChild.children||onlyOneChild.noShowingChildren)&&!item.alwaysShow">
|
||||
<app-link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
|
||||
<el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{'submenu-title-noDropdown':!isNest}">
|
||||
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="onlyOneChild.meta.title" />
|
||||
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="generateTitle(onlyOneChild.meta.title)" />
|
||||
</el-menu-item>
|
||||
</app-link>
|
||||
</template>
|
||||
|
||||
<el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
|
||||
<template slot="title">
|
||||
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
|
||||
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="generateTitle(item.meta.title)" />
|
||||
</template>
|
||||
<sidebar-item
|
||||
v-for="child in item.children"
|
||||
|
@ -26,6 +26,7 @@
|
|||
|
||||
<script>
|
||||
import path from 'path'
|
||||
import { generateTitle } from '@/utils/i18n'
|
||||
import { isExternal } from '@/utils/validate'
|
||||
import Item from './Item'
|
||||
import AppLink from './Link'
|
||||
|
@ -89,7 +90,9 @@ export default {
|
|||
return this.basePath
|
||||
}
|
||||
return path.resolve(this.basePath, routePath)
|
||||
}
|
||||
},
|
||||
|
||||
generateTitle
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -12,21 +12,22 @@
|
|||
@click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
|
||||
@contextmenu.prevent.native="openMenu(tag,$event)"
|
||||
>
|
||||
{{ tag.title }}
|
||||
{{ generateTitle(tag.title) }}
|
||||
<span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
|
||||
</router-link>
|
||||
</scroll-pane>
|
||||
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
|
||||
<li @click="refreshSelectedTag(selectedTag)">Refresh</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
|
||||
<li @click="closeOthersTags">Close Others</li>
|
||||
<li @click="closeAllTags(selectedTag)">Close All</li>
|
||||
<li @click="refreshSelectedTag(selectedTag)">{{ $t('tagsView.refresh') }}</li>
|
||||
<li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">{{ $t('tagsView.close') }}</li>
|
||||
<li @click="closeOthersTags">{{ $t('tagsView.closeOthers') }}</li>
|
||||
<li @click="closeAllTags(selectedTag)">{{ $t('tagsView.closeAll') }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ScrollPane from './ScrollPane'
|
||||
import { generateTitle } from '@/utils/i18n'
|
||||
import path from 'path'
|
||||
|
||||
export default {
|
||||
|
@ -66,6 +67,7 @@ export default {
|
|||
this.addTags()
|
||||
},
|
||||
methods: {
|
||||
generateTitle, // generateTitle by vue-i18n
|
||||
isActive(route) {
|
||||
return route.path === this.$route.path
|
||||
},
|
||||
|
|
12
src/main.js
12
src/main.js
|
@ -6,7 +6,6 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
|
|||
|
||||
import Element from 'element-ui'
|
||||
import './styles/element-variables.scss'
|
||||
import enLang from 'element-ui/lib/locale/lang/en'// 如果使用中文语言包请默认支持,无需额外引入,请删除该依赖
|
||||
|
||||
import '@/styles/index.scss' // global css
|
||||
|
||||
|
@ -14,12 +13,20 @@ import App from './App'
|
|||
import store from './store'
|
||||
import router from './router'
|
||||
|
||||
import i18n from './lang' // internationalization
|
||||
import './icons' // icon
|
||||
import './permission' // permission control
|
||||
import './utils/error-log' // error log
|
||||
|
||||
import * as filters from './filters' // global filters
|
||||
|
||||
import VueAnalytics from 'vue-analytics'
|
||||
|
||||
Vue.use(VueAnalytics, {
|
||||
id: 'UA-109340118-1',
|
||||
router
|
||||
})
|
||||
|
||||
/**
|
||||
* If you don't want to use mock-server
|
||||
* you want to use MockJs for mock api
|
||||
|
@ -35,7 +42,7 @@ if (process.env.NODE_ENV === 'production') {
|
|||
|
||||
Vue.use(Element, {
|
||||
size: Cookies.get('size') || 'medium', // set element-ui default size
|
||||
locale: enLang // 如果使用中文,无需设置,请删除
|
||||
i18n: (key, value) => i18n.t(key, value)
|
||||
})
|
||||
|
||||
// register global utility filters
|
||||
|
@ -49,5 +56,6 @@ new Vue({
|
|||
el: '#app',
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
render: h => h(App)
|
||||
})
|
||||
|
|
|
@ -71,15 +71,15 @@ export const constantRoutes = [
|
|||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
path: '',
|
||||
component: Layout,
|
||||
redirect: '/dashboard',
|
||||
redirect: 'dashboard',
|
||||
children: [
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: () => import('@/views/dashboard/index'),
|
||||
name: 'Dashboard',
|
||||
meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
|
||||
meta: { title: 'dashboard', icon: 'dashboard', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -91,7 +91,7 @@ export const constantRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/documentation/index'),
|
||||
name: 'Documentation',
|
||||
meta: { title: 'Documentation', icon: 'documentation', affix: true }
|
||||
meta: { title: 'documentation', icon: 'documentation', affix: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -104,7 +104,7 @@ export const constantRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/guide/index'),
|
||||
name: 'Guide',
|
||||
meta: { title: 'Guide', icon: 'guide', noCache: true }
|
||||
meta: { title: 'guide', icon: 'guide', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -118,7 +118,7 @@ export const constantRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/profile/index'),
|
||||
name: 'Profile',
|
||||
meta: { title: 'Profile', icon: 'user', noCache: true }
|
||||
meta: { title: 'profile', icon: 'user', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -136,7 +136,7 @@ export const asyncRoutes = [
|
|||
alwaysShow: true, // will always show the root menu
|
||||
name: 'Permission',
|
||||
meta: {
|
||||
title: 'Permission',
|
||||
title: 'permission',
|
||||
icon: 'lock',
|
||||
roles: ['admin', 'editor'] // you can set roles in root nav
|
||||
},
|
||||
|
@ -146,7 +146,7 @@ export const asyncRoutes = [
|
|||
component: () => import('@/views/permission/page'),
|
||||
name: 'PagePermission',
|
||||
meta: {
|
||||
title: 'Page Permission',
|
||||
title: 'pagePermission',
|
||||
roles: ['admin'] // or you can only set roles in sub nav
|
||||
}
|
||||
},
|
||||
|
@ -155,7 +155,7 @@ export const asyncRoutes = [
|
|||
component: () => import('@/views/permission/directive'),
|
||||
name: 'DirectivePermission',
|
||||
meta: {
|
||||
title: 'Directive Permission'
|
||||
title: 'directivePermission'
|
||||
// if do not set roles, means: this page does not require permission
|
||||
}
|
||||
},
|
||||
|
@ -164,7 +164,7 @@ export const asyncRoutes = [
|
|||
component: () => import('@/views/permission/role'),
|
||||
name: 'RolePermission',
|
||||
meta: {
|
||||
title: 'Role Permission',
|
||||
title: 'rolePermission',
|
||||
roles: ['admin']
|
||||
}
|
||||
}
|
||||
|
@ -179,7 +179,7 @@ export const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/icons/index'),
|
||||
name: 'Icons',
|
||||
meta: { title: 'Icons', icon: 'icon', noCache: true }
|
||||
meta: { title: 'icons', icon: 'icon', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -196,7 +196,7 @@ export const asyncRoutes = [
|
|||
redirect: '/example/list',
|
||||
name: 'Example',
|
||||
meta: {
|
||||
title: 'Example',
|
||||
title: 'example',
|
||||
icon: 'el-icon-s-help'
|
||||
},
|
||||
children: [
|
||||
|
@ -204,20 +204,20 @@ export const asyncRoutes = [
|
|||
path: 'create',
|
||||
component: () => import('@/views/example/create'),
|
||||
name: 'CreateArticle',
|
||||
meta: { title: 'Create Article', icon: 'edit' }
|
||||
meta: { title: 'createArticle', icon: 'edit' }
|
||||
},
|
||||
{
|
||||
path: 'edit/:id(\\d+)',
|
||||
component: () => import('@/views/example/edit'),
|
||||
name: 'EditArticle',
|
||||
meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
|
||||
meta: { title: 'editArticle', noCache: true, activeMenu: '/example/list' },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: 'list',
|
||||
component: () => import('@/views/example/list'),
|
||||
name: 'ArticleList',
|
||||
meta: { title: 'Article List', icon: 'list' }
|
||||
meta: { title: 'articleList', icon: 'list' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -230,7 +230,7 @@ export const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/tab/index'),
|
||||
name: 'Tab',
|
||||
meta: { title: 'Tab', icon: 'tab' }
|
||||
meta: { title: 'tab', icon: 'tab' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -241,7 +241,7 @@ export const asyncRoutes = [
|
|||
redirect: 'noRedirect',
|
||||
name: 'ErrorPages',
|
||||
meta: {
|
||||
title: 'Error Pages',
|
||||
title: 'errorPages',
|
||||
icon: '404'
|
||||
},
|
||||
children: [
|
||||
|
@ -249,13 +249,13 @@ export const asyncRoutes = [
|
|||
path: '401',
|
||||
component: () => import('@/views/error-page/401'),
|
||||
name: 'Page401',
|
||||
meta: { title: '401', noCache: true }
|
||||
meta: { title: 'page401', noCache: true }
|
||||
},
|
||||
{
|
||||
path: '404',
|
||||
component: () => import('@/views/error-page/404'),
|
||||
name: 'Page404',
|
||||
meta: { title: '404', noCache: true }
|
||||
meta: { title: 'page404', noCache: true }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -268,7 +268,7 @@ export const asyncRoutes = [
|
|||
path: 'log',
|
||||
component: () => import('@/views/error-log/index'),
|
||||
name: 'ErrorLog',
|
||||
meta: { title: 'Error Log', icon: 'bug' }
|
||||
meta: { title: 'errorLog', icon: 'bug' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -279,7 +279,7 @@ export const asyncRoutes = [
|
|||
redirect: '/excel/export-excel',
|
||||
name: 'Excel',
|
||||
meta: {
|
||||
title: 'Excel',
|
||||
title: 'excel',
|
||||
icon: 'excel'
|
||||
},
|
||||
children: [
|
||||
|
@ -287,25 +287,25 @@ export const asyncRoutes = [
|
|||
path: 'export-excel',
|
||||
component: () => import('@/views/excel/export-excel'),
|
||||
name: 'ExportExcel',
|
||||
meta: { title: 'Export Excel' }
|
||||
meta: { title: 'exportExcel' }
|
||||
},
|
||||
{
|
||||
path: 'export-selected-excel',
|
||||
component: () => import('@/views/excel/select-excel'),
|
||||
name: 'SelectExcel',
|
||||
meta: { title: 'Export Selected' }
|
||||
meta: { title: 'selectExcel' }
|
||||
},
|
||||
{
|
||||
path: 'export-merge-header',
|
||||
component: () => import('@/views/excel/merge-header'),
|
||||
name: 'MergeHeader',
|
||||
meta: { title: 'Merge Header' }
|
||||
meta: { title: 'mergeHeader' }
|
||||
},
|
||||
{
|
||||
path: 'upload-excel',
|
||||
component: () => import('@/views/excel/upload-excel'),
|
||||
name: 'UploadExcel',
|
||||
meta: { title: 'Upload Excel' }
|
||||
meta: { title: 'uploadExcel' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -316,13 +316,13 @@ export const asyncRoutes = [
|
|||
redirect: '/zip/download',
|
||||
alwaysShow: true,
|
||||
name: 'Zip',
|
||||
meta: { title: 'Zip', icon: 'zip' },
|
||||
meta: { title: 'zip', icon: 'zip' },
|
||||
children: [
|
||||
{
|
||||
path: 'download',
|
||||
component: () => import('@/views/zip/index'),
|
||||
name: 'ExportZip',
|
||||
meta: { title: 'Export Zip' }
|
||||
meta: { title: 'exportZip' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -336,7 +336,7 @@ export const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/pdf/index'),
|
||||
name: 'PDF',
|
||||
meta: { title: 'PDF', icon: 'pdf' }
|
||||
meta: { title: 'pdf', icon: 'pdf' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -354,7 +354,7 @@ export const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/theme/index'),
|
||||
name: 'Theme',
|
||||
meta: { title: 'Theme', icon: 'theme' }
|
||||
meta: { title: 'theme', icon: 'theme' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -367,7 +367,20 @@ export const asyncRoutes = [
|
|||
path: 'index',
|
||||
component: () => import('@/views/clipboard/index'),
|
||||
name: 'ClipboardDemo',
|
||||
meta: { title: 'Clipboard', icon: 'clipboard' }
|
||||
meta: { title: 'clipboardDemo', icon: 'clipboard' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/i18n',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: () => import('@/views/i18n-demo/index'),
|
||||
name: 'I18n',
|
||||
meta: { title: 'i18n', icon: 'international' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -378,12 +391,22 @@ export const asyncRoutes = [
|
|||
children: [
|
||||
{
|
||||
path: 'https://github.com/PanJiaChen/vue-element-admin',
|
||||
meta: { title: 'External Link', icon: 'link' }
|
||||
meta: { title: 'externalLink', icon: 'link' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: 'donate',
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: 'https://panjiachen.gitee.io/vue-element-admin-site/zh/donate/',
|
||||
meta: { title: 'donate', icon: 'donate' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// 404 page must be placed at the end !!!
|
||||
{ path: '*', redirect: '/404', hidden: true }
|
||||
]
|
||||
|
||||
|
|
|
@ -8,7 +8,7 @@ const chartsRouter = {
|
|||
redirect: 'noRedirect',
|
||||
name: 'Charts',
|
||||
meta: {
|
||||
title: 'Charts',
|
||||
title: 'charts',
|
||||
icon: 'chart'
|
||||
},
|
||||
children: [
|
||||
|
@ -16,19 +16,19 @@ const chartsRouter = {
|
|||
path: 'keyboard',
|
||||
component: () => import('@/views/charts/keyboard'),
|
||||
name: 'KeyboardChart',
|
||||
meta: { title: 'Keyboard Chart', noCache: true }
|
||||
meta: { title: 'keyboardChart', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'line',
|
||||
component: () => import('@/views/charts/line'),
|
||||
name: 'LineChart',
|
||||
meta: { title: 'Line Chart', noCache: true }
|
||||
meta: { title: 'lineChart', noCache: true }
|
||||
},
|
||||
{
|
||||
path: 'mix-chart',
|
||||
component: () => import('@/views/charts/mix-chart'),
|
||||
name: 'MixChart',
|
||||
meta: { title: 'Mix Chart', noCache: true }
|
||||
meta: { title: 'mixChart', noCache: true }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@ const componentsRouter = {
|
|||
redirect: 'noRedirect',
|
||||
name: 'ComponentDemo',
|
||||
meta: {
|
||||
title: 'Components',
|
||||
title: 'components',
|
||||
icon: 'component'
|
||||
},
|
||||
children: [
|
||||
|
@ -16,85 +16,85 @@ const componentsRouter = {
|
|||
path: 'tinymce',
|
||||
component: () => import('@/views/components-demo/tinymce'),
|
||||
name: 'TinymceDemo',
|
||||
meta: { title: 'Tinymce' }
|
||||
meta: { title: 'tinymce' }
|
||||
},
|
||||
{
|
||||
path: 'markdown',
|
||||
component: () => import('@/views/components-demo/markdown'),
|
||||
name: 'MarkdownDemo',
|
||||
meta: { title: 'Markdown' }
|
||||
meta: { title: 'markdown' }
|
||||
},
|
||||
{
|
||||
path: 'json-editor',
|
||||
component: () => import('@/views/components-demo/json-editor'),
|
||||
name: 'JsonEditorDemo',
|
||||
meta: { title: 'JSON Editor' }
|
||||
meta: { title: 'jsonEditor' }
|
||||
},
|
||||
{
|
||||
path: 'split-pane',
|
||||
component: () => import('@/views/components-demo/split-pane'),
|
||||
name: 'SplitpaneDemo',
|
||||
meta: { title: 'SplitPane' }
|
||||
meta: { title: 'splitPane' }
|
||||
},
|
||||
{
|
||||
path: 'avatar-upload',
|
||||
component: () => import('@/views/components-demo/avatar-upload'),
|
||||
name: 'AvatarUploadDemo',
|
||||
meta: { title: 'Upload' }
|
||||
meta: { title: 'avatarUpload' }
|
||||
},
|
||||
{
|
||||
path: 'dropzone',
|
||||
component: () => import('@/views/components-demo/dropzone'),
|
||||
name: 'DropzoneDemo',
|
||||
meta: { title: 'Dropzone' }
|
||||
meta: { title: 'dropzone' }
|
||||
},
|
||||
{
|
||||
path: 'sticky',
|
||||
component: () => import('@/views/components-demo/sticky'),
|
||||
name: 'StickyDemo',
|
||||
meta: { title: 'Sticky' }
|
||||
meta: { title: 'sticky' }
|
||||
},
|
||||
{
|
||||
path: 'count-to',
|
||||
component: () => import('@/views/components-demo/count-to'),
|
||||
name: 'CountToDemo',
|
||||
meta: { title: 'Count To' }
|
||||
meta: { title: 'countTo' }
|
||||
},
|
||||
{
|
||||
path: 'mixin',
|
||||
component: () => import('@/views/components-demo/mixin'),
|
||||
name: 'ComponentMixinDemo',
|
||||
meta: { title: 'Component Mixin' }
|
||||
meta: { title: 'componentMixin' }
|
||||
},
|
||||
{
|
||||
path: 'back-to-top',
|
||||
component: () => import('@/views/components-demo/back-to-top'),
|
||||
name: 'BackToTopDemo',
|
||||
meta: { title: 'Back To Top' }
|
||||
meta: { title: 'backToTop' }
|
||||
},
|
||||
{
|
||||
path: 'drag-dialog',
|
||||
component: () => import('@/views/components-demo/drag-dialog'),
|
||||
name: 'DragDialogDemo',
|
||||
meta: { title: 'Drag Dialog' }
|
||||
meta: { title: 'dragDialog' }
|
||||
},
|
||||
{
|
||||
path: 'drag-select',
|
||||
component: () => import('@/views/components-demo/drag-select'),
|
||||
name: 'DragSelectDemo',
|
||||
meta: { title: 'Drag Select' }
|
||||
meta: { title: 'dragSelect' }
|
||||
},
|
||||
{
|
||||
path: 'dnd-list',
|
||||
component: () => import('@/views/components-demo/dnd-list'),
|
||||
name: 'DndListDemo',
|
||||
meta: { title: 'Dnd List' }
|
||||
meta: { title: 'dndList' }
|
||||
},
|
||||
{
|
||||
path: 'drag-kanban',
|
||||
component: () => import('@/views/components-demo/drag-kanban'),
|
||||
name: 'DragKanbanDemo',
|
||||
meta: { title: 'Drag Kanban' }
|
||||
meta: { title: 'dragKanban' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -8,7 +8,7 @@ const nestedRouter = {
|
|||
redirect: '/nested/menu1/menu1-1',
|
||||
name: 'Nested',
|
||||
meta: {
|
||||
title: 'Nested Routes',
|
||||
title: 'nested',
|
||||
icon: 'nested'
|
||||
},
|
||||
children: [
|
||||
|
@ -16,33 +16,33 @@ const nestedRouter = {
|
|||
path: 'menu1',
|
||||
component: () => import('@/views/nested/menu1/index'), // Parent router-view
|
||||
name: 'Menu1',
|
||||
meta: { title: 'Menu 1' },
|
||||
meta: { title: 'menu1' },
|
||||
redirect: '/nested/menu1/menu1-1',
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-1',
|
||||
component: () => import('@/views/nested/menu1/menu1-1'),
|
||||
name: 'Menu1-1',
|
||||
meta: { title: 'Menu 1-1' }
|
||||
meta: { title: 'menu1-1' }
|
||||
},
|
||||
{
|
||||
path: 'menu1-2',
|
||||
component: () => import('@/views/nested/menu1/menu1-2'),
|
||||
name: 'Menu1-2',
|
||||
redirect: '/nested/menu1/menu1-2/menu1-2-1',
|
||||
meta: { title: 'Menu 1-2' },
|
||||
meta: { title: 'menu1-2' },
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-2-1',
|
||||
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
|
||||
name: 'Menu1-2-1',
|
||||
meta: { title: 'Menu 1-2-1' }
|
||||
meta: { title: 'menu1-2-1' }
|
||||
},
|
||||
{
|
||||
path: 'menu1-2-2',
|
||||
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
|
||||
name: 'Menu1-2-2',
|
||||
meta: { title: 'Menu 1-2-2' }
|
||||
meta: { title: 'menu1-2-2' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -50,7 +50,7 @@ const nestedRouter = {
|
|||
path: 'menu1-3',
|
||||
component: () => import('@/views/nested/menu1/menu1-3'),
|
||||
name: 'Menu1-3',
|
||||
meta: { title: 'Menu 1-3' }
|
||||
meta: { title: 'menu1-3' }
|
||||
}
|
||||
]
|
||||
},
|
||||
|
@ -58,7 +58,7 @@ const nestedRouter = {
|
|||
path: 'menu2',
|
||||
name: 'Menu2',
|
||||
component: () => import('@/views/nested/menu2/index'),
|
||||
meta: { title: 'Menu 2' }
|
||||
meta: { title: 'menu2' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -16,25 +16,25 @@ const tableRouter = {
|
|||
path: 'dynamic-table',
|
||||
component: () => import('@/views/table/dynamic-table/index'),
|
||||
name: 'DynamicTable',
|
||||
meta: { title: 'Dynamic Table' }
|
||||
meta: { title: 'dynamicTable' }
|
||||
},
|
||||
{
|
||||
path: 'drag-table',
|
||||
component: () => import('@/views/table/drag-table'),
|
||||
name: 'DragTable',
|
||||
meta: { title: 'Drag Table' }
|
||||
meta: { title: 'dragTable' }
|
||||
},
|
||||
{
|
||||
path: 'inline-edit-table',
|
||||
component: () => import('@/views/table/inline-edit-table'),
|
||||
name: 'InlineEditTable',
|
||||
meta: { title: 'Inline Edit' }
|
||||
meta: { title: 'inlineEditTable' }
|
||||
},
|
||||
{
|
||||
path: 'complex-table',
|
||||
component: () => import('@/views/table/complex-table'),
|
||||
name: 'ComplexTable',
|
||||
meta: { title: 'Complex Table' }
|
||||
meta: { title: 'complexTable' }
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
@ -25,6 +25,13 @@ module.exports = {
|
|||
*/
|
||||
sidebarLogo: false,
|
||||
|
||||
/**
|
||||
* @type {boolean} true | false
|
||||
* @description Whether support pinyin search in headerSearch
|
||||
* Bundle size minified 47.3kb,minified + gzipped 63kb
|
||||
*/
|
||||
supportPinyinSearch: true,
|
||||
|
||||
/**
|
||||
* @type {string | array} 'production' | ['production', 'development']
|
||||
* @description Need show err logs component.
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
const getters = {
|
||||
sidebar: state => state.app.sidebar,
|
||||
language: state => state.app.language,
|
||||
size: state => state.app.size,
|
||||
device: state => state.app.device,
|
||||
visitedViews: state => state.tagsView.visitedViews,
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import Cookies from 'js-cookie'
|
||||
import { getLanguage } from '@/lang/index'
|
||||
|
||||
const state = {
|
||||
sidebar: {
|
||||
|
@ -6,6 +7,7 @@ const state = {
|
|||
withoutAnimation: false
|
||||
},
|
||||
device: 'desktop',
|
||||
language: getLanguage(),
|
||||
size: Cookies.get('size') || 'medium'
|
||||
}
|
||||
|
||||
|
@ -27,6 +29,10 @@ const mutations = {
|
|||
TOGGLE_DEVICE: (state, device) => {
|
||||
state.device = device
|
||||
},
|
||||
SET_LANGUAGE: (state, language) => {
|
||||
state.language = language
|
||||
Cookies.set('language', language)
|
||||
},
|
||||
SET_SIZE: (state, size) => {
|
||||
state.size = size
|
||||
Cookies.set('size', size)
|
||||
|
@ -43,6 +49,9 @@ const actions = {
|
|||
toggleDevice({ commit }, device) {
|
||||
commit('TOGGLE_DEVICE', device)
|
||||
},
|
||||
setLanguage({ commit }, language) {
|
||||
commit('SET_LANGUAGE', language)
|
||||
},
|
||||
setSize({ commit }, size) {
|
||||
commit('SET_SIZE', size)
|
||||
}
|
||||
|
|
|
@ -1,14 +1,15 @@
|
|||
import variables from '@/styles/element-variables.scss'
|
||||
import defaultSettings from '@/settings'
|
||||
|
||||
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
|
||||
const { showSettings, tagsView, fixedHeader, sidebarLogo, supportPinyinSearch } = defaultSettings
|
||||
|
||||
const state = {
|
||||
theme: variables.theme,
|
||||
showSettings: showSettings,
|
||||
tagsView: tagsView,
|
||||
fixedHeader: fixedHeader,
|
||||
sidebarLogo: sidebarLogo
|
||||
showSettings,
|
||||
tagsView,
|
||||
fixedHeader,
|
||||
sidebarLogo,
|
||||
supportPinyinSearch
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
import defaultSettings from '@/settings'
|
||||
import i18n from '@/lang'
|
||||
|
||||
const title = defaultSettings.title || 'Vue Element Admin'
|
||||
|
||||
export default function getPageTitle(pageTitle) {
|
||||
if (pageTitle) {
|
||||
return `${pageTitle} - ${title}`
|
||||
export default function getPageTitle(key) {
|
||||
const hasKey = i18n.te(`route.${key}`)
|
||||
if (hasKey) {
|
||||
const pageName = i18n.t(`route.${key}`)
|
||||
return `${pageName} - ${title}`
|
||||
}
|
||||
return `${title}`
|
||||
}
|
||||
|
|
|
@ -0,0 +1,12 @@
|
|||
// translate router.meta.title, be used in breadcrumb sidebar tagsview
|
||||
export function generateTitle(title) {
|
||||
const hasKey = this.$te('route.' + title)
|
||||
|
||||
if (hasKey) {
|
||||
// $t :this method from vue-i18n, inject in @/lang/index.js
|
||||
const translatedTitle = this.$t('route.' + title)
|
||||
|
||||
return translatedTitle
|
||||
}
|
||||
return title
|
||||
}
|
|
@ -2,7 +2,7 @@
|
|||
<div class="components-container">
|
||||
<aside>This is based on
|
||||
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
|
||||
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.
|
||||
{{ $t('components.imageUploadTips') }}
|
||||
</aside>
|
||||
|
||||
<pan-thumb :image="image" />
|
||||
|
|
|
@ -1,11 +1,7 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<aside>
|
||||
When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner
|
||||
</aside>
|
||||
<aside>
|
||||
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
|
||||
</aside>
|
||||
<aside>{{ $t('components.backToTopTips1') }}</aside>
|
||||
<aside>{{ $t('components.backToTopTips2') }}</aside>
|
||||
<div class="placeholder-container">
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div class="components-container">
|
||||
<aside>
|
||||
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
|
||||
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.
|
||||
{{ $t('components.dropzoneTips') }}
|
||||
</aside>
|
||||
<div class="editor-container">
|
||||
<dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
|
||||
|
|
|
@ -79,7 +79,7 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
language() {
|
||||
return this.languageTypeList['en']
|
||||
return this.languageTypeList[this.$store.getters.language]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
@ -37,9 +37,7 @@
|
|||
</sticky>
|
||||
|
||||
<div class="components-container">
|
||||
<aside>
|
||||
Sticky header, When the page is scrolled to the preset position will be sticky on the top.
|
||||
</aside>
|
||||
<aside>Sticky header, {{ $t('components.stickyTips') }}</aside>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
<div>placeholder</div>
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="components-container">
|
||||
<aside>
|
||||
Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html">Documentation</a>
|
||||
{{ $t('components.tinymceTips') }}
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/feature/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
|
||||
</aside>
|
||||
<div>
|
||||
<tinymce v-model="content" :height="300" />
|
||||
|
|
|
@ -2,11 +2,12 @@
|
|||
<div class="errPage-container">
|
||||
<ErrorA />
|
||||
<ErrorB />
|
||||
<h3>Please click the bug icon in the upper right corner</h3>
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<h3>{{ $t('errorLog.tips') }}</h3>
|
||||
<aside>
|
||||
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.
|
||||
{{ $t('errorLog.description') }}
|
||||
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
|
||||
Document introduction
|
||||
{{ $t('errorLog.documentation') }}
|
||||
</a>
|
||||
</aside>
|
||||
<a href="#">
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<template>
|
||||
<div class="createPost-container">
|
||||
<el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
|
||||
|
||||
<sticky :z-index="10" :class-name="'sub-navbar '+postForm.status">
|
||||
<CommentDropdown v-model="postForm.comment_disabled" />
|
||||
<PlatformDropdown v-model="postForm.platforms" />
|
||||
|
@ -153,6 +152,9 @@ export default {
|
|||
contentShortLength() {
|
||||
return this.postForm.content_short.length
|
||||
},
|
||||
lang() {
|
||||
return this.$store.getters.language
|
||||
},
|
||||
displayTime: {
|
||||
// set and get is useful when the data
|
||||
// returned by the back end api is different from the front end
|
||||
|
@ -196,7 +198,7 @@ export default {
|
|||
})
|
||||
},
|
||||
setTagsViewTitle() {
|
||||
const title = 'Edit Article'
|
||||
const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
|
||||
const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
|
||||
this.$store.dispatch('tagsView/updateVisitedView', route)
|
||||
},
|
||||
|
|
|
@ -1,9 +1,6 @@
|
|||
<template>
|
||||
<aside>
|
||||
Creating and editing pages cannot be cached by keep-alive because keep-alive include does not currently support
|
||||
caching based on routes, so it is currently cached based on component name. If you want to achieve a similar caching
|
||||
effect, you can use a browser caching scheme such as localStorage. Or do not use keep-alive include to cache all
|
||||
pages directly. See details
|
||||
{{ $t('example.warning') }}
|
||||
<a
|
||||
href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
|
||||
target="_blank"
|
||||
|
|
|
@ -1,7 +1,8 @@
|
|||
<template>
|
||||
<div style="display:inline-block;">
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<label class="radio-label" style="padding-left:0;">Filename: </label>
|
||||
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
|
||||
<el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:350px;" prefix-icon="el-icon-document" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<div class="app-container">
|
||||
|
||||
<div>
|
||||
<FilenameOption v-model="filename" />
|
||||
<AutoWidthOption v-model="autoWidth" />
|
||||
<BookTypeOption v-model="bookType" />
|
||||
<el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
|
||||
Export Excel
|
||||
{{ $t('excel.export') }} Excel
|
||||
</el-button>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
|
||||
<el-tag type="info">Documentation</el-tag>
|
||||
|
@ -51,7 +51,6 @@ import { parseTime } from '@/utils'
|
|||
import FilenameOption from './components/FilenameOption'
|
||||
import AutoWidthOption from './components/AutoWidthOption'
|
||||
import BookTypeOption from './components/BookTypeOption'
|
||||
|
||||
export default {
|
||||
name: 'ExportExcel',
|
||||
components: { FilenameOption, AutoWidthOption, BookTypeOption },
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<el-input v-model="filename" :placeholder="$t('excel.placeholder')" style="width:350px;" prefix-icon="el-icon-document" />
|
||||
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="el-icon-document" @click="handleDownload">
|
||||
Export Selected Items
|
||||
{{ $t('excel.selectedExport') }}
|
||||
</el-button>
|
||||
<a href="https://panjiachen.github.io/vue-element-admin-site/feature/component/excel.html" target="_blank" style="margin-left:15px;">
|
||||
<el-tag type="info">Documentation</el-tag>
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<aside>
|
||||
The guide page is useful for some people who entered the project for the first time. You can briefly introduce the
|
||||
features of the project. Demo is based on
|
||||
{{ $t('guide.description') }}
|
||||
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
|
||||
</aside>
|
||||
<el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
|
||||
Show Guide
|
||||
{{ $t('guide.button') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="box-card" style="margin-top:40px;">
|
||||
<div slot="header" class="clearfix">
|
||||
<svg-icon icon-class="international" />
|
||||
<span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<el-radio-group v-model="lang" size="small">
|
||||
<el-radio label="zh" border>
|
||||
简体中文
|
||||
</el-radio>
|
||||
<el-radio label="en" border>
|
||||
English
|
||||
</el-radio>
|
||||
<el-radio label="es" border>
|
||||
Español
|
||||
</el-radio>
|
||||
<el-radio label="ja" border>
|
||||
日本語
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
<el-tag style="margin-top:15px;display:block;" type="info">
|
||||
{{ $t('i18nView.note') }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="20" style="margin:100px 15px 50px;">
|
||||
<el-col :span="12" :xs="24">
|
||||
<div class="block">
|
||||
<el-date-picker v-model="date" :placeholder="$t('i18nView.datePlaceholder')" type="date" />
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-select v-model="value" :placeholder="$t('i18nView.selectPlaceholder')">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="block">
|
||||
<el-button class="item-btn" size="small">
|
||||
{{ $t('i18nView.default') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="primary">
|
||||
{{ $t('i18nView.primary') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="success">
|
||||
{{ $t('i18nView.success') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="info">
|
||||
{{ $t('i18nView.info') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="warning">
|
||||
{{ $t('i18nView.warning') }}
|
||||
</el-button>
|
||||
<el-button class="item-btn" size="small" type="danger">
|
||||
{{ $t('i18nView.danger') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24">
|
||||
<el-table :data="tableData" fit highlight-current-row border style="width: 100%">
|
||||
<el-table-column :label="$t('i18nView.tableName')" prop="name" width="100" align="center" />
|
||||
<el-table-column :label="$t('i18nView.tableDate')" prop="date" width="120" align="center" />
|
||||
<el-table-column :label="$t('i18nView.tableAddress')" prop="address" />
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import local from './local'
|
||||
const viewName = 'i18nView'
|
||||
|
||||
export default {
|
||||
name: 'I18n',
|
||||
data() {
|
||||
return {
|
||||
date: '',
|
||||
tableData: [{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles'
|
||||
}],
|
||||
options: [],
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
lang: {
|
||||
get() {
|
||||
return this.$store.state.app.language
|
||||
},
|
||||
set(lang) {
|
||||
this.$i18n.locale = lang
|
||||
this.$store.dispatch('app/setLanguage', lang)
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
lang() {
|
||||
this.setOptions()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (!this.$i18n.getLocaleMessage('en')[viewName]) {
|
||||
this.$i18n.mergeLocaleMessage('en', local.en)
|
||||
this.$i18n.mergeLocaleMessage('zh', local.zh)
|
||||
this.$i18n.mergeLocaleMessage('es', local.es)
|
||||
this.$i18n.mergeLocaleMessage('ja', local.ja)
|
||||
}
|
||||
this.setOptions() // set default select options
|
||||
},
|
||||
methods: {
|
||||
setOptions() {
|
||||
this.options = [
|
||||
{
|
||||
value: '1',
|
||||
label: this.$t('i18nView.one')
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: this.$t('i18nView.two')
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: this.$t('i18nView.three')
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box-card {
|
||||
width: 600px;
|
||||
max-width: 100%;
|
||||
margin: 20px auto;
|
||||
}
|
||||
.item-btn{
|
||||
margin-bottom: 15px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
.block {
|
||||
padding: 25px;
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,83 @@
|
|||
|
||||
export default {
|
||||
zh: {
|
||||
i18nView: {
|
||||
title: '切换语言',
|
||||
note: '本项目国际化基于 vue-i18n',
|
||||
datePlaceholder: '请选择日期',
|
||||
selectPlaceholder: '请选择',
|
||||
tableDate: '日期',
|
||||
tableName: '姓名',
|
||||
tableAddress: '地址',
|
||||
default: '默认按钮',
|
||||
primary: '主要按钮',
|
||||
success: '成功按钮',
|
||||
info: '信息按钮',
|
||||
warning: '警告按钮',
|
||||
danger: '危险按钮',
|
||||
one: '一',
|
||||
two: '二',
|
||||
three: '三'
|
||||
}
|
||||
},
|
||||
en: {
|
||||
i18nView: {
|
||||
title: 'Switch Language',
|
||||
note: 'The internationalization of this project is based on vue-i18n',
|
||||
datePlaceholder: 'Pick a day',
|
||||
selectPlaceholder: 'Select',
|
||||
tableDate: 'tableDate',
|
||||
tableName: 'tableName',
|
||||
tableAddress: 'tableAddress',
|
||||
default: 'default:',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: 'One',
|
||||
two: 'Two',
|
||||
three: 'Three'
|
||||
}
|
||||
},
|
||||
es: {
|
||||
i18nView: {
|
||||
title: 'Switch Language',
|
||||
note: 'The internationalization of this project is based on vue-i18n',
|
||||
datePlaceholder: 'Pick a day',
|
||||
selectPlaceholder: 'Select',
|
||||
tableDate: 'tableDate',
|
||||
tableName: 'tableName',
|
||||
tableAddress: 'tableAddress',
|
||||
default: 'default:',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: 'One',
|
||||
two: 'Two',
|
||||
three: 'Three'
|
||||
}
|
||||
},
|
||||
ja: {
|
||||
i18nView: {
|
||||
title: '言語切替',
|
||||
note: 'vue-i18nを使っています',
|
||||
datePlaceholder: '日時選択',
|
||||
selectPlaceholder: '選択してください',
|
||||
tableDate: '日時',
|
||||
tableName: '姓名',
|
||||
tableAddress: '住所',
|
||||
default: 'default',
|
||||
primary: 'primary',
|
||||
success: 'success',
|
||||
info: 'info',
|
||||
warning: 'warning',
|
||||
danger: 'danger',
|
||||
one: '1',
|
||||
two: '2',
|
||||
three: '3'
|
||||
}
|
||||
}
|
||||
}
|
|
@ -3,7 +3,10 @@
|
|||
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
|
||||
|
||||
<div class="title-container">
|
||||
<h3 class="title">Login Form</h3>
|
||||
<h3 class="title">
|
||||
{{ $t('login.title') }}
|
||||
</h3>
|
||||
<lang-select class="set-language" />
|
||||
</div>
|
||||
|
||||
<el-form-item prop="username">
|
||||
|
@ -13,7 +16,7 @@
|
|||
<el-input
|
||||
ref="username"
|
||||
v-model="loginForm.username"
|
||||
placeholder="Username"
|
||||
:placeholder="$t('login.username')"
|
||||
name="username"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
|
@ -31,7 +34,7 @@
|
|||
ref="password"
|
||||
v-model="loginForm.password"
|
||||
:type="passwordType"
|
||||
placeholder="Password"
|
||||
:placeholder="$t('login.password')"
|
||||
name="password"
|
||||
tabindex="2"
|
||||
autocomplete="on"
|
||||
|
@ -45,26 +48,30 @@
|
|||
</el-form-item>
|
||||
</el-tooltip>
|
||||
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
|
||||
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
|
||||
{{ $t('login.logIn') }}
|
||||
</el-button>
|
||||
|
||||
<div style="position:relative">
|
||||
<div class="tips">
|
||||
<span>Username : admin</span>
|
||||
<span>Password : any</span>
|
||||
<span>{{ $t('login.username') }} : admin</span>
|
||||
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
|
||||
</div>
|
||||
<div class="tips">
|
||||
<span style="margin-right:18px;">Username : editor</span>
|
||||
<span>Password : any</span>
|
||||
<span style="margin-right:18px;">
|
||||
{{ $t('login.username') }} : editor
|
||||
</span>
|
||||
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
|
||||
</div>
|
||||
|
||||
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">
|
||||
Or connect with
|
||||
{{ $t('login.thirdparty') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<el-dialog title="Or connect with" :visible.sync="showDialog">
|
||||
Can not be simulated on local, so please combine you own business simulation! ! !
|
||||
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
|
||||
{{ $t('login.thirdpartyTips') }}
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
|
@ -75,11 +82,12 @@
|
|||
|
||||
<script>
|
||||
import { validUsername } from '@/utils/validate'
|
||||
import LangSelect from '@/components/LangSelect'
|
||||
import SocialSign from './components/SocialSignin'
|
||||
|
||||
export default {
|
||||
name: 'Login',
|
||||
components: { SocialSign },
|
||||
components: { LangSelect, SocialSign },
|
||||
data() {
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (!validUsername(value)) {
|
||||
|
@ -297,6 +305,15 @@ $light_gray:#eee;
|
|||
text-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.set-language {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
font-size: 18px;
|
||||
right: 0px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.show-pwd {
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<aside style="margin-top:15px;">
|
||||
Here we use window.print() to implement the feature of downloading PDF.
|
||||
</aside>
|
||||
<aside style="margin-top:15px;">{{ $t('pdf.tips') }}</aside>
|
||||
<router-link target="_blank" to="/pdf/download">
|
||||
<el-button type="primary">
|
||||
Click to download PDF
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<div style="margin-bottom:15px;">
|
||||
Your roles: {{ roles }}
|
||||
{{ $t('permission.roles') }}: {{ roles }}
|
||||
</div>
|
||||
Switch roles:
|
||||
{{ $t('permission.switchRoles') }}:
|
||||
<el-radio-group v-model="switchRoles">
|
||||
<el-radio-button label="editor" />
|
||||
<el-radio-button label="admin" />
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
<div :key="'checkPermission'+key" style="margin-top:60px;">
|
||||
<aside>
|
||||
In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
|
||||
{{ $t('permission.tips') }}
|
||||
<br> e.g.
|
||||
</aside>
|
||||
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-button type="primary" @click="handleAddRole">New Role</el-button>
|
||||
<el-button type="primary" @click="handleAddRole">
|
||||
{{ $t('permission.addRole') }}
|
||||
</el-button>
|
||||
|
||||
<el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
|
||||
<el-table-column align="center" label="Role Key" width="220">
|
||||
|
@ -20,8 +22,12 @@
|
|||
</el-table-column>
|
||||
<el-table-column align="center" label="Operations">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
|
||||
<el-button type="primary" size="small" @click="handleEdit(scope)">
|
||||
{{ $t('permission.editPermission') }}
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" @click="handleDelete(scope)">
|
||||
{{ $t('permission.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
@ -40,20 +46,16 @@
|
|||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="Menus">
|
||||
<el-tree
|
||||
ref="tree"
|
||||
:check-strictly="checkStrictly"
|
||||
:data="routesData"
|
||||
:props="defaultProps"
|
||||
show-checkbox
|
||||
node-key="path"
|
||||
class="permission-tree"
|
||||
/>
|
||||
<el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="defaultProps" show-checkbox node-key="path" class="permission-tree" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="text-align:right;">
|
||||
<el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
|
||||
<el-button type="primary" @click="confirmRole">Confirm</el-button>
|
||||
<el-button type="danger" @click="dialogVisible=false">
|
||||
{{ $t('permission.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="confirmRole">
|
||||
{{ $t('permission.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
@ -63,6 +65,7 @@
|
|||
import path from 'path'
|
||||
import { deepClone } from '@/utils'
|
||||
import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
|
||||
import i18n from '@/lang'
|
||||
|
||||
const defaultRole = {
|
||||
key: '',
|
||||
|
@ -100,13 +103,23 @@ export default {
|
|||
async getRoutes() {
|
||||
const res = await getRoutes()
|
||||
this.serviceRoutes = res.data
|
||||
this.routes = this.generateRoutes(res.data)
|
||||
const routes = this.generateRoutes(res.data)
|
||||
this.routes = this.i18n(routes)
|
||||
},
|
||||
async getRoles() {
|
||||
const res = await getRoles()
|
||||
this.rolesList = res.data
|
||||
},
|
||||
|
||||
i18n(routes) {
|
||||
const app = routes.map(route => {
|
||||
route.title = i18n.t(`route.${route.title}`)
|
||||
if (route.children) {
|
||||
route.children = this.i18n(route.children)
|
||||
}
|
||||
return route
|
||||
})
|
||||
return app
|
||||
},
|
||||
// Reshape the routes structure so that it looks the same as the sidebar
|
||||
generateRoutes(routes, basePath = '/') {
|
||||
const res = []
|
||||
|
|
|
@ -1,27 +1,27 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div class="filter-container">
|
||||
<el-input v-model="listQuery.title" placeholder="Title" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
||||
<el-select v-model="listQuery.importance" placeholder="Imp" clearable style="width: 90px" class="filter-item">
|
||||
<el-input v-model="listQuery.title" :placeholder="$t('table.title')" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
|
||||
<el-select v-model="listQuery.importance" :placeholder="$t('table.importance')" clearable style="width: 90px" class="filter-item">
|
||||
<el-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.type" placeholder="Type" clearable class="filter-item" style="width: 130px">
|
||||
<el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name+'('+item.key+')'" :value="item.key" />
|
||||
</el-select>
|
||||
<el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
|
||||
<el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
|
||||
</el-select>
|
||||
<el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
|
||||
Search
|
||||
{{ $t('table.search') }}
|
||||
</el-button>
|
||||
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
|
||||
Add
|
||||
{{ $t('table.add') }}
|
||||
</el-button>
|
||||
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
|
||||
Export
|
||||
{{ $t('table.export') }}
|
||||
</el-button>
|
||||
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
|
||||
reviewer
|
||||
{{ $t('table.reviewer') }}
|
||||
</el-checkbox>
|
||||
</div>
|
||||
|
||||
|
@ -35,63 +35,63 @@
|
|||
style="width: 100%;"
|
||||
@sort-change="sortChange"
|
||||
>
|
||||
<el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
|
||||
<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.id }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Date" width="150px" align="center">
|
||||
<el-table-column :label="$t('table.date')" width="150px" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Title" min-width="150px">
|
||||
<el-table-column :label="$t('table.title')" min-width="150px">
|
||||
<template slot-scope="{row}">
|
||||
<span class="link-type" @click="handleUpdate(row)">{{ row.title }}</span>
|
||||
<el-tag>{{ row.type | typeFilter }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Author" width="110px" align="center">
|
||||
<el-table-column :label="$t('table.author')" width="110px" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span>{{ row.author }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
|
||||
<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
|
||||
<template slot-scope="{row}">
|
||||
<span style="color:red;">{{ row.reviewer }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Imp" width="80px">
|
||||
<el-table-column :label="$t('table.importance')" width="80px">
|
||||
<template slot-scope="{row}">
|
||||
<svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
|
||||
<svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Readings" align="center" width="95">
|
||||
<el-table-column :label="$t('table.readings')" align="center" width="95">
|
||||
<template slot-scope="{row}">
|
||||
<span v-if="row.pageviews" class="link-type" @click="handleFetchPv(row.pageviews)">{{ row.pageviews }}</span>
|
||||
<span v-else>0</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Status" class-name="status-col" width="100">
|
||||
<el-table-column :label="$t('table.status')" class-name="status-col" width="100">
|
||||
<template slot-scope="{row}">
|
||||
<el-tag :type="row.status | statusFilter">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
|
||||
<el-table-column :label="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
|
||||
<template slot-scope="{row,$index}">
|
||||
<el-button type="primary" size="mini" @click="handleUpdate(row)">
|
||||
Edit
|
||||
{{ $t('table.edit') }}
|
||||
</el-button>
|
||||
<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
|
||||
Publish
|
||||
{{ $t('table.publish') }}
|
||||
</el-button>
|
||||
<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
|
||||
Draft
|
||||
{{ $t('table.draft') }}
|
||||
</el-button>
|
||||
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
|
||||
Delete
|
||||
{{ $t('table.delete') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
@ -101,35 +101,35 @@
|
|||
|
||||
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
|
||||
<el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
|
||||
<el-form-item label="Type" prop="type">
|
||||
<el-form-item :label="$t('table.type')" prop="type">
|
||||
<el-select v-model="temp.type" class="filter-item" placeholder="Please select">
|
||||
<el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Date" prop="timestamp">
|
||||
<el-form-item :label="$t('table.date')" prop="timestamp">
|
||||
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Title" prop="title">
|
||||
<el-form-item :label="$t('table.title')" prop="title">
|
||||
<el-input v-model="temp.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Status">
|
||||
<el-form-item :label="$t('table.status')">
|
||||
<el-select v-model="temp.status" class="filter-item" placeholder="Please select">
|
||||
<el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="Imp">
|
||||
<el-form-item :label="$t('table.importance')">
|
||||
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Remark">
|
||||
<el-form-item :label="$t('table.remark')">
|
||||
<el-input v-model="temp.remark" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">
|
||||
Cancel
|
||||
{{ $t('table.cancel') }}
|
||||
</el-button>
|
||||
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
|
||||
Confirm
|
||||
{{ $t('table.confirm') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
@ -140,7 +140,7 @@
|
|||
<el-table-column prop="pv" label="Pv" />
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
|
||||
<el-button type="primary" @click="dialogPvVisible = false">{{ $t('table.confirm') }}</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
@ -248,7 +248,7 @@ export default {
|
|||
},
|
||||
handleModifyStatus(row, status) {
|
||||
this.$message({
|
||||
message: '操作Success',
|
||||
message: '操作成功',
|
||||
type: 'success'
|
||||
})
|
||||
row.status = status
|
||||
|
@ -295,8 +295,8 @@ export default {
|
|||
this.list.unshift(this.temp)
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'Created Successfully',
|
||||
title: '成功',
|
||||
message: '创建成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
|
@ -323,8 +323,8 @@ export default {
|
|||
this.list.splice(index, 1, this.temp)
|
||||
this.dialogFormVisible = false
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'Update Successfully',
|
||||
title: '成功',
|
||||
message: '更新成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
|
@ -334,8 +334,8 @@ export default {
|
|||
},
|
||||
handleDelete(row, index) {
|
||||
this.$notify({
|
||||
title: 'Success',
|
||||
message: 'Delete Successfully',
|
||||
title: '成功',
|
||||
message: '删除成功',
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
|
|
|
@ -52,11 +52,12 @@
|
|||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- $t is vue-i18n global function to translate lang (lang in @/lang) -->
|
||||
<div class="show-d">
|
||||
<el-tag>The default order :</el-tag> {{ oldList }}
|
||||
<el-tag style="margin-right:12px;">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }}
|
||||
</div>
|
||||
<div class="show-d">
|
||||
<el-tag>The after dragging order :</el-tag> {{ newList }}
|
||||
<el-tag>{{ $t('table.dragTips2') }} :</el-tag> {{ newList }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
@ -1,12 +1,12 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<div style="margin:0 0 5px 20px">
|
||||
Fixed header, sorted by header order,
|
||||
{{ $t('table.dynamicTips1') }}
|
||||
</div>
|
||||
<fixed-thead />
|
||||
|
||||
<div style="margin:30px 0 5px 20px">
|
||||
Not fixed header, sorted by click order
|
||||
{{ $t('table.dynamicTips2') }}
|
||||
</div>
|
||||
<unfixed-thead />
|
||||
</div>
|
||||
|
|
|
@ -3,15 +3,13 @@
|
|||
<el-card class="box-card">
|
||||
<div slot="header">
|
||||
<a class="link-type link-title" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/theme.html">
|
||||
Theme documentation
|
||||
{{ $t('theme.documentation') }}
|
||||
</a>
|
||||
</div>
|
||||
<div class="box-item">
|
||||
<span class="field-label">Change Theme : </span>
|
||||
<span class="field-label">{{ $t('theme.change') }} : </span>
|
||||
<el-switch v-model="theme" />
|
||||
<aside style="margin-top:15px;">
|
||||
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.
|
||||
</aside>
|
||||
<aside style="margin-top:15px;">{{ $t('theme.tips') }}</aside>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
|
|
@ -1,8 +1,9 @@
|
|||
<template>
|
||||
<div class="app-container">
|
||||
<el-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
|
||||
<!-- $t is vue-i18n global function to translate lang -->
|
||||
<el-input v-model="filename" :placeholder="$t('zip.placeholder')" style="width:300px;" prefix-icon="el-icon-document" />
|
||||
<el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="el-icon-document" @click="handleDownload">
|
||||
Export Zip
|
||||
{{ $t('zip.export') }} Zip
|
||||
</el-button>
|
||||
<el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
|
||||
<el-table-column align="center" label="ID" width="95">
|
||||
|
|
|
@ -24,7 +24,7 @@ module.exports = {
|
|||
* In most cases please use '/' !!!
|
||||
* Detail: https://cli.vuejs.org/config/#publicpath
|
||||
*/
|
||||
publicPath: '/',
|
||||
publicPath: '/vue-element-admin/',
|
||||
outputDir: 'dist',
|
||||
assetsDir: 'static',
|
||||
lintOnSave: process.env.NODE_ENV === 'development',
|
||||
|
|
Loading…
Reference in New Issue