zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: remove i18n (#1828)

This commit is contained in:
花裤衩 2019-05-05 16:49:40 +08:00 committed by GitHub
parent e8e6c7e79c
commit 00a19db299
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
63 changed files with 317 additions and 1440 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
README.ja.md
View File

@ -26,7 +26,7 @@
</a>
</p>
日本語 | [English](./README.md) | [简体中文](./README.zh-CN.md)
日本語 | [English](./README.md) | [简体中文](./README.zh-CN.md)
## 概要
@ -46,6 +46,8 @@
- デスクトップバージョン: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Typescriptバージョン: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
**現在のバージョン `v4.0+` は `vue-cli` で構築，バグ報告は[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)のissueでお願いします。旧バージョン[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)もあります。`vue-cli`に依存しないです。**
**低いバージョンのブラウザはサーポートしないです(例えば ie)，必要があれば polyfill を追加してください。 [詳細はこちら](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
@ -207,4 +209,4 @@ Modern browsers and Internet Explorer 10+.
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
Copyright (c) 2017-present PanJiaChen
Copyright (c) 2017-present PanJiaChen

6
README.md
View File

@ -26,7 +26,7 @@
</a>
</p>
English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md)
English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md)
## Introduction
@ -50,7 +50,9 @@ It is a magical vue admin based on the newest development stack of vue, built-in
- Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour))
**The current version is `v4.0+` build on `vue-cli`. If you find a problem, please put [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), it does not rely on `vue-cli'**
**After the `v4.1.0+` version, the default master branch will not support i18n. Please use [i18n Branch](https://github.com/PanJiaChen/vue-element-admin/tree/i18n), it will keep up with the master update**
**The current version is `v4.0+` build on `vue-cli`. If you find a problem, please put [issue](https://github.com/PanJiaChen/vue-element-admin/issues/new). If you want to use the old version , you can switch branch to [tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0), it does not rely on `vue-cli`**
**This project does not support low version browsers (e.g. IE). Please add polyfill by yourself.**

4
README.zh-CN.md
View File

@ -50,10 +50,12 @@
- 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin)
- Typescript 版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour))
**目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若发现问题，欢迎提[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)。若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)，它不依赖 `vue-cli`**
**`v4.1.0+`版本之后默认 master 分支将不支持国际化，有需要的请使用[i18n](https://github.com/PanJiaChen/vue-element-admin/tree/i18n)分支，它会和 master 保持同步更新**
**该项目不支持低版本浏览器(如 ie)，有需求请自行添加 polyfill [详情](https://github.com/PanJiaChen/vue-element-admin/wiki#babel-polyfill)**
**目前版本为 `v4.0+` 基于 `vue-cli` 进行构建，若发现问题，欢迎提[issue](https://github.com/PanJiaChen/vue-element-admin/issues/new)。若你想使用旧版本，可以切换分支到[tag/3.11.0](https://github.com/PanJiaChen/vue-element-admin/tree/tag/3.11.0)，它不依赖 `vue-cli`**
群主 **[圈子](https://jianshiapp.com/circles/1209)** 群主会经常分享一些技术相关的东西，或者加入 [qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602) 或者关注 [微博](https://weibo.com/u/3423485724?is_all=1)
## 前序准备

110
mock/role/routes.js
View File

@ -41,7 +41,7 @@ export 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 @@ export 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 @@ export 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 @@ export const asyncRoutes = [
redirect: '/permission/index',
alwaysShow: true,
meta: {
title: 'permission',
title: 'Permission',
icon: 'lock',
roles: ['admin', 'editor']
},
@ -89,7 +89,7 @@ export const asyncRoutes = [
component: 'views/permission/page',
name: 'PagePermission',
meta: {
title: 'pagePermission',
title: 'Page Permission',
roles: ['admin']
}
},
@ -98,7 +98,7 @@ export const asyncRoutes = [
component: 'views/permission/directive',
name: 'DirectivePermission',
meta: {
title: 'directivePermission'
title: 'Directive Permission'
}
},
{
@ -106,7 +106,7 @@ export const asyncRoutes = [
component: 'views/permission/role',
name: 'RolePermission',
meta: {
title: 'rolePermission',
title: 'Role Permission',
roles: ['admin']
}
}
@ -121,7 +121,7 @@ export 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 @@ export const asyncRoutes = [
redirect: 'noRedirect',
name: 'ComponentDemo',
meta: {
title: 'components',
title: 'Components',
icon: 'component'
},
children: [
@ -140,49 +140,49 @@ export 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: 'jsonEditor' }
meta: { title: 'Json Editor' }
},
{
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: 'avatarUpload' }
meta: { title: 'Avatar Upload' }
},
{
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: 'countTo' }
meta: { title: 'Count To' }
},
{
path: 'mixin',
@ -194,31 +194,31 @@ export const asyncRoutes = [
path: 'back-to-top',
component: 'views/components-demo/back-to-top',
name: 'BackToTopDemo',
meta: { title: 'backToTop' }
meta: { title: 'Back To Top' }
},
{
path: 'drag-dialog',
component: 'views/components-demo/drag-dialog',
name: 'DragDialogDemo',
meta: { title: 'dragDialog' }
meta: { title: 'Drag Dialog' }
},
{
path: 'drag-select',
component: 'views/components-demo/drag-select',
name: 'DragSelectDemo',
meta: { title: 'dragSelect' }
meta: { title: 'Drag Select' }
},
{
path: 'dnd-list',
component: 'views/components-demo/dnd-list',
name: 'DndListDemo',
meta: { title: 'dndList' }
meta: { title: 'Dnd List' }
},
{
path: 'drag-kanban',
component: 'views/components-demo/drag-kanban',
name: 'DragKanbanDemo',
meta: { title: 'dragKanban' }
meta: { title: 'Drag Kanban' }
}
]
},
@ -228,7 +228,7 @@ export const asyncRoutes = [
redirect: 'noRedirect',
name: 'Charts',
meta: {
title: 'charts',
title: 'Charts',
icon: 'chart'
},
children: [
@ -236,19 +236,19 @@ export const asyncRoutes = [
path: 'keyboard',
component: 'views/charts/keyboard',
name: 'KeyboardChart',
meta: { title: 'keyboardChart', noCache: true }
meta: { title: 'Keyboard Chart', noCache: true }
},
{
path: 'line',
component: 'views/charts/line',
name: 'LineChart',
meta: { title: 'lineChart', noCache: true }
meta: { title: 'Line Chart', noCache: true }
},
{
path: 'mixchart',
component: 'views/charts/mixChart',
name: 'MixChart',
meta: { title: 'mixChart', noCache: true }
meta: { title: 'Mix Chart', noCache: true }
}
]
},
@ -258,7 +258,7 @@ export const asyncRoutes = [
redirect: '/nested/menu1/menu1-1',
name: 'Nested',
meta: {
title: 'nested',
title: 'Nested',
icon: 'nested'
},
children: [
@ -266,33 +266,33 @@ export 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 @@ export 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 @@ export const asyncRoutes = [
path: 'menu2',
name: 'Menu2',
component: 'views/nested/menu2/index',
meta: { title: 'menu2' }
meta: { title: 'Menu2' }
}
]
},
@ -319,7 +319,7 @@ export const asyncRoutes = [
redirect: '/example/list',
name: 'Example',
meta: {
title: 'example',
title: 'Example',
icon: 'example'
},
children: [
@ -327,20 +327,20 @@ export const asyncRoutes = [
path: 'create',
component: 'views/example/create',
name: 'CreateArticle',
meta: { title: 'createArticle', icon: 'edit' }
meta: { title: 'Create Article', icon: 'edit' }
},
{
path: 'edit/:id(\\d+)',
component: 'views/example/edit',
name: 'EditArticle',
meta: { title: 'editArticle', noCache: true },
meta: { title: 'Edit Article', noCache: true },
hidden: true
},
{
path: 'list',
component: 'views/example/list',
name: 'ArticleList',
meta: { title: 'articleList', icon: 'list' }
meta: { title: 'Article List', icon: 'list' }
}
]
},
@ -353,7 +353,7 @@ export const asyncRoutes = [
path: 'index',
component: 'views/tab/index',
name: 'Tab',
meta: { title: 'tab', icon: 'tab' }
meta: { title: 'Tab', icon: 'tab' }
}
]
},
@ -364,7 +364,7 @@ export const asyncRoutes = [
redirect: 'noRedirect',
name: 'ErrorPages',
meta: {
title: 'errorPages',
title: 'Error Pages',
icon: '404'
},
children: [
@ -372,13 +372,13 @@ export const asyncRoutes = [
path: '401',
component: 'views/error-page/401',
name: 'Page401',
meta: { title: 'page401', noCache: true }
meta: { title: 'Page 401', noCache: true }
},
{
path: '404',
component: 'views/error-page/404',
name: 'Page404',
meta: { title: 'page404', noCache: true }
meta: { title: 'Page 404', noCache: true }
}
]
},
@ -392,7 +392,7 @@ export const asyncRoutes = [
path: 'log',
component: 'views/error-log/index',
name: 'ErrorLog',
meta: { title: 'errorLog', icon: 'bug' }
meta: { title: 'Error Log', icon: 'bug' }
}
]
},
@ -403,7 +403,7 @@ export const asyncRoutes = [
redirect: '/excel/export-excel',
name: 'Excel',
meta: {
title: 'excel',
title: 'Excel',
icon: 'excel'
},
children: [
@ -411,25 +411,25 @@ export const asyncRoutes = [
path: 'export-excel',
component: 'views/excel/export-excel',
name: 'ExportExcel',
meta: { title: 'exportExcel' }
meta: { title: 'Export Excel' }
},
{
path: 'export-selected-excel',
component: 'views/excel/select-excel',
name: 'SelectExcel',
meta: { title: 'selectExcel' }
meta: { title: 'Select Excel' }
},
{
path: 'export-merge-header',
component: 'views/excel/merge-header',
name: 'MergeHeader',
meta: { title: 'mergeHeader' }
meta: { title: 'Merge Header' }
},
{
path: 'upload-excel',
component: 'views/excel/upload-excel',
name: 'UploadExcel',
meta: { title: 'uploadExcel' }
meta: { title: 'Upload Excel' }
}
]
},
@ -439,13 +439,13 @@ export 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: 'exportZip' }
meta: { title: 'Export Zip' }
}
]
},
@ -459,7 +459,7 @@ export const asyncRoutes = [
path: 'index',
component: 'views/pdf/index',
name: 'PDF',
meta: { title: 'pdf', icon: 'pdf' }
meta: { title: 'PDF', icon: 'pdf' }
}
]
},
@ -478,7 +478,7 @@ export const asyncRoutes = [
path: 'index',
component: 'views/theme/index',
name: 'Theme',
meta: { title: 'theme', icon: 'theme' }
meta: { title: 'Theme', icon: 'theme' }
}
]
},
@ -492,7 +492,7 @@ export const asyncRoutes = [
path: 'index',
component: 'views/clipboard/index',
name: 'ClipboardDemo',
meta: { title: 'clipboardDemo', icon: 'clipboard' }
meta: { title: 'Clipboard Demo', icon: 'clipboard' }
}
]
},
@ -505,7 +505,7 @@ export 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 @@ export const asyncRoutes = [
children: [
{
path: 'https://github.com/PanJiaChen/vue-element-admin',
meta: { title: 'externalLink', icon: 'link' }
meta: { title: 'External Link', icon: 'link' }
}
]
},

1
package.json
View File

@ -64,7 +64,6 @@
"tui-editor": "1.3.3",
"vue": "2.6.10",
"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
src/components/Breadcrumb/index.vue
View File

@ -2,16 +2,14 @@
<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">{{
generateTitle(item.meta.title) }}</span>
<a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
<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>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
import { generateTitle } from '@/utils/i18n'
import pathToRegexp from 'path-to-regexp'
export default {
@ -29,14 +27,13 @@ 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)

12
src/components/HeaderSearch/index.vue
View File

@ -22,7 +22,6 @@
// 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',
@ -38,15 +37,9 @@ export default {
computed: {
routes() {
return this.$store.getters.permission_routes
},
lang() {
return this.$store.getters.language
}
},
watch: {
lang() {
this.searchPool = this.generateRoutes(this.routes)
},
routes() {
this.searchPool = this.generateRoutes(this.routes)
},
@ -116,10 +109,7 @@ export default {
}
if (router.meta && router.meta.title) {
// generate internationalized title
const i18ntitle = i18n.t(`route.${router.meta.title}`)
data.title = [...data.title, i18ntitle]
data.title = [...data.title, router.meta.title]
if (router.redirect !== 'noRedirect') {
// only push the routes with title

41
src/components/LangSelect/index.vue
View File

@ -1,41 +0,0 @@
<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>

14
src/components/Tinymce/index.vue
View File

@ -60,16 +60,11 @@ export default {
fullscreen: false,
languageTypeList: {
'en': 'en',
'zh': 'zh_CN',
'es': 'es_MX',
'ja': 'ja'
'zh': 'zh_CN'
}
}
},
computed: {
language() {
return this.languageTypeList[this.$store.getters.language]
},
containerWidth() {
const width = this.width
if (/^[\d]+(\.[\d]+)?$/.test(width)) { // matches `100`, `'100'`
@ -84,10 +79,6 @@ export default {
this.$nextTick(() =>
window.tinymce.get(this.tinymceId).setContent(val || ''))
}
},
language() {
this.destroyTinymce()
this.$nextTick(() => this.initTinymce())
}
},
mounted() {
@ -106,9 +97,6 @@ export default {
initTinymce() {
const _this = this
window.tinymce.init({
language: this.language,
// language cnd URL, detail see https://github.com/PanJiaChen/tinymce-lang
language_url: this.language === 'en' ? '' : `https://cdn.jsdelivr.net/npm/tinymce-lang/langs/${this.language}.js`,
selector: `#${this.tinymceId}`,
height: this.height,
body_class: 'panel-body ',

2
src/icons/index.js
View File

@ -1,5 +1,5 @@
import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg组件
import SvgIcon from '@/components/SvgIcon'// svg component
// register globally
Vue.component('svg-icon', SvgIcon)

175
src/lang/en.js
View File

@ -1,175 +0,0 @@
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',
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'
}
}

175
src/lang/es.js
View File

@ -1,175 +0,0 @@
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',
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'
}
}

55
src/lang/index.js
View File

@ -1,55 +0,0 @@
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

175
src/lang/ja.js
View File

@ -1,175 +0,0 @@
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: 'メニュー１',
'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'
}
}

175
src/lang/zh.js
View File

@ -1,175 +0,0 @@
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: '外链',
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'
}
}

20
src/layout/components/Navbar.vue
View File

@ -12,12 +12,10 @@
<screenfull id="screenfull" class="right-menu-item hover-effect" />
<el-tooltip :content="$t('navbar.size')" effect="dark" placement="bottom">
<el-tooltip content="Global 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">
@ -27,25 +25,19 @@
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/profile/index">
<el-dropdown-item>
{{ $t('navbar.profile') }}
</el-dropdown-item>
<el-dropdown-item>Profile</el-dropdown-item>
</router-link>
<router-link to="/">
<el-dropdown-item>
{{ $t('navbar.dashboard') }}
</el-dropdown-item>
<el-dropdown-item>Dashboard</el-dropdown-item>
</router-link>
<a target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">
<el-dropdown-item>
{{ $t('navbar.github') }}
</el-dropdown-item>
<el-dropdown-item>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>
<span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
<span style="display:block;" @click="logout">Log Out</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
@ -60,7 +52,6 @@ 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 {
@ -70,7 +61,6 @@ export default {
ErrorLog,
Screenfull,
SizeSelect,
LangSelect,
Search
},
computed: {

10
src/layout/components/Settings/index.vue
View File

@ -1,25 +1,25 @@
<template>
<div class="drawer-container">
<div>
<h3 class="drawer-title">{{ $t('settings.title') }}</h3>
<h3 class="drawer-title">Page style setting</h3>
<div class="drawer-item">
<span>{{ $t('settings.theme') }}</span>
<span>Theme Color</span>
<theme-picker style="float: right;height: 26px;margin: -3px 8px 0 0;" @change="themeChange" />
</div>
<div class="drawer-item">
<span>{{ $t('settings.tagsView') }}</span>
<span>Open Tags-View</span>
<el-switch v-model="tagsView" class="drawer-switch" />
</div>
<div class="drawer-item">
<span>{{ $t('settings.fixedHeader') }}</span>
<span>Fixed Header</span>
<el-switch v-model="fixedHeader" class="drawer-switch" />
</div>
<div class="drawer-item">
<span>{{ $t('settings.sidebarLogo') }}</span>
<span>Sidebar Logo</span>
<el-switch v-model="sidebarLogo" class="drawer-switch" />
</div>

9
src/layout/components/Sidebar/SidebarItem.vue
View File

@ -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="generateTitle(onlyOneChild.meta.title)" />
<item :icon="onlyOneChild.meta.icon||(item.meta&&item.meta.icon)" :title="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="generateTitle(item.meta.title)" />
<item v-if="item.meta" :icon="item.meta && item.meta.icon" :title="item.meta.title" />
</template>
<sidebar-item
v-for="child in item.children"
@ -26,7 +26,6 @@
<script>
import path from 'path'
import { generateTitle } from '@/utils/i18n'
import { isExternal } from '@/utils/validate'
import Item from './Item'
import AppLink from './Link'
@ -90,9 +89,7 @@ export default {
return this.basePath
}
return path.resolve(this.basePath, routePath)
},
generateTitle
}
}
}
</script>

21
src/layout/components/TagsView/index.vue
View File

@ -12,31 +12,21 @@
@click.middle.native="closeSelectedTag(tag)"
@contextmenu.prevent.native="openMenu(tag,$event)"
>
{{ generateTitle(tag.title) }}
{{ tag.title }}
<span v-if="!tag.meta.affix" 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)">
{{ $t('tagsView.refresh') }}
</li>
<li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">
{{
$t('tagsView.close') }}
</li>
<li @click="closeOthersTags">
{{ $t('tagsView.closeOthers') }}
</li>
<li @click="closeAllTags(selectedTag)">
{{ $t('tagsView.closeAll') }}
</li>
<li @click="refreshSelectedTag(selectedTag)">Refresh</li>
<li v-if="!(selectedTag.meta&&selectedTag.meta.affix)" @click="closeSelectedTag(selectedTag)">Close</li>
<li @click="closeOthersTags">Close Others</li>
<li @click="closeAllTags(selectedTag)">Close All</li>
</ul>
</div>
</template>
<script>
import ScrollPane from './ScrollPane'
import { generateTitle } from '@/utils/i18n'
import path from 'path'
export default {
@ -76,7 +66,6 @@ export default {
this.addTags()
},
methods: {
generateTitle, // generateTitle by vue-i18n
isActive(route) {
return route.path === this.$route.path
},

5
src/main.js
View File

@ -13,7 +13,6 @@ 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
@ -30,8 +29,7 @@ import * as filters from './filters' // global filters
*/
Vue.use(Element, {
size: Cookies.get('size') || 'medium', // set element-ui default size
i18n: (key, value) => i18n.t(key, value)
size: Cookies.get('size') || 'medium' // set element-ui default size
})
// register global utility filters
@ -45,6 +43,5 @@ new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})

76
src/router/index.js
View File

@ -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: 'pagePermission',
title: 'Page Permission',
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: 'directivePermission'
title: 'Directive Permission'
// 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: 'rolePermission',
title: 'Role Permission',
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: 'example'
},
children: [
@ -204,20 +204,20 @@ export const asyncRoutes = [
path: 'create',
component: () => import('@/views/example/create'),
name: 'CreateArticle',
meta: { title: 'createArticle', icon: 'edit' }
meta: { title: 'Create Article', icon: 'edit' }
},
{
path: 'edit/:id(\\d+)',
component: () => import('@/views/example/edit'),
name: 'EditArticle',
meta: { title: 'editArticle', noCache: true, activeMenu: '/example/list' },
meta: { title: 'Edit Article', noCache: true, activeMenu: '/example/list' },
hidden: true
},
{
path: 'list',
component: () => import('@/views/example/list'),
name: 'ArticleList',
meta: { title: 'articleList', icon: 'list' }
meta: { title: 'Article List', 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: 'errorPages',
title: 'Error Pages',
icon: '404'
},
children: [
@ -249,13 +249,13 @@ export const asyncRoutes = [
path: '401',
component: () => import('@/views/error-page/401'),
name: 'Page401',
meta: { title: 'page401', noCache: true }
meta: { title: '401', noCache: true }
},
{
path: '404',
component: () => import('@/views/error-page/404'),
name: 'Page404',
meta: { title: 'page404', noCache: true }
meta: { title: '404', noCache: true }
}
]
},
@ -268,7 +268,7 @@ export const asyncRoutes = [
path: 'log',
component: () => import('@/views/error-log/index'),
name: 'ErrorLog',
meta: { title: 'errorLog', icon: 'bug' }
meta: { title: 'Error Log', 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: 'exportExcel' }
meta: { title: 'Export Excel' }
},
{
path: 'export-selected-excel',
component: () => import('@/views/excel/select-excel'),
name: 'SelectExcel',
meta: { title: 'selectExcel' }
meta: { title: 'Export Selected' }
},
{
path: 'export-merge-header',
component: () => import('@/views/excel/merge-header'),
name: 'MergeHeader',
meta: { title: 'mergeHeader' }
meta: { title: 'Merge Header' }
},
{
path: 'upload-excel',
component: () => import('@/views/excel/upload-excel'),
name: 'UploadExcel',
meta: { title: 'uploadExcel' }
meta: { title: 'Upload Excel' }
}
]
},
@ -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: 'exportZip' }
meta: { title: 'Export Zip' }
}
]
},
@ -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,20 +367,7 @@ export const asyncRoutes = [
path: 'index',
component: () => import('@/views/clipboard/index'),
name: 'ClipboardDemo',
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' }
meta: { title: 'Clipboard', icon: 'clipboard' }
}
]
},
@ -391,11 +378,12 @@ export const asyncRoutes = [
children: [
{
path: 'https://github.com/PanJiaChen/vue-element-admin',
meta: { title: 'externalLink', icon: 'link' }
meta: { title: 'External Link', icon: 'link' }
}
]
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]

8
src/router/modules/charts.js
View File

@ -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: 'keyboardChart', noCache: true }
meta: { title: 'Keyboard Chart', noCache: true }
},
{
path: 'line',
component: () => import('@/views/charts/line'),
name: 'LineChart',
meta: { title: 'lineChart', noCache: true }
meta: { title: 'Line Chart', noCache: true }
},
{
path: 'mix-chart',
component: () => import('@/views/charts/mix-chart'),
name: 'MixChart',
meta: { title: 'mixChart', noCache: true }
meta: { title: 'Mix Chart', noCache: true }
}
]
}

30
src/router/modules/components.js
View File

@ -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: 'jsonEditor' }
meta: { title: 'JSON Editor' }
},
{
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: 'avatarUpload' }
meta: { title: 'Upload' }
},
{
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: 'countTo' }
meta: { title: 'Count To' }
},
{
path: 'mixin',
component: () => import('@/views/components-demo/mixin'),
name: 'ComponentMixinDemo',
meta: { title: 'componentMixin' }
meta: { title: 'Component Mixin' }
},
{
path: 'back-to-top',
component: () => import('@/views/components-demo/back-to-top'),
name: 'BackToTopDemo',
meta: { title: 'backToTop' }
meta: { title: 'Back To Top' }
},
{
path: 'drag-dialog',
component: () => import('@/views/components-demo/drag-dialog'),
name: 'DragDialogDemo',
meta: { title: 'dragDialog' }
meta: { title: 'Drag Dialog' }
},
{
path: 'drag-select',
component: () => import('@/views/components-demo/drag-select'),
name: 'DragSelectDemo',
meta: { title: 'dragSelect' }
meta: { title: 'Drag Select' }
},
{
path: 'dnd-list',
component: () => import('@/views/components-demo/dnd-list'),
name: 'DndListDemo',
meta: { title: 'dndList' }
meta: { title: 'Dnd List' }
},
{
path: 'drag-kanban',
component: () => import('@/views/components-demo/drag-kanban'),
name: 'DragKanbanDemo',
meta: { title: 'dragKanban' }
meta: { title: 'Drag Kanban' }
}
]
}

16
src/router/modules/nested.js
View File

@ -8,7 +8,7 @@ const nestedRouter = {
redirect: '/nested/menu1/menu1-1',
name: 'Nested',
meta: {
title: 'nested',
title: 'Nested Routes',
icon: 'nested'
},
children: [
@ -16,33 +16,33 @@ const nestedRouter = {
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'Menu1',
meta: { title: 'menu1' },
meta: { title: 'Menu 1' },
redirect: '/nested/menu1/menu1-1',
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'Menu1-1',
meta: { title: 'menu1-1' }
meta: { title: 'Menu 1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'Menu1-2',
redirect: '/nested/menu1/menu1-2/menu1-2-1',
meta: { title: 'menu1-2' },
meta: { title: 'Menu 1-2' },
children: [
{
path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'Menu1-2-1',
meta: { title: 'menu1-2-1' }
meta: { title: 'Menu 1-2-1' }
},
{
path: 'menu1-2-2',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
name: 'Menu1-2-2',
meta: { title: 'menu1-2-2' }
meta: { title: 'Menu 1-2-2' }
}
]
},
@ -50,7 +50,7 @@ const nestedRouter = {
path: 'menu1-3',
component: () => import('@/views/nested/menu1/menu1-3'),
name: 'Menu1-3',
meta: { title: 'menu1-3' }
meta: { title: 'Menu 1-3' }
}
]
},
@ -58,7 +58,7 @@ const nestedRouter = {
path: 'menu2',
name: 'Menu2',
component: () => import('@/views/nested/menu2/index'),
meta: { title: 'menu2' }
meta: { title: 'Menu 2' }
}
]
}

8
src/router/modules/table.js
View File

@ -16,25 +16,25 @@ const tableRouter = {
path: 'dynamic-table',
component: () => import('@/views/table/dynamic-table/index'),
name: 'DynamicTable',
meta: { title: 'dynamicTable' }
meta: { title: 'Dynamic Table' }
},
{
path: 'drag-table',
component: () => import('@/views/table/drag-table'),
name: 'DragTable',
meta: { title: 'dragTable' }
meta: { title: 'Drag Table' }
},
{
path: 'inline-edit-table',
component: () => import('@/views/table/inline-edit-table'),
name: 'InlineEditTable',
meta: { title: 'inlineEditTable' }
meta: { title: 'Inline Edit' }
},
{
path: 'complex-table',
component: () => import('@/views/table/complex-table'),
name: 'ComplexTable',
meta: { title: 'complexTable' }
meta: { title: 'Complex Table' }
}
]
}

1
src/store/getters.js
View File

@ -1,6 +1,5 @@
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,

9
src/store/modules/app.js
View File

@ -1,5 +1,4 @@
import Cookies from 'js-cookie'
import { getLanguage } from '@/lang/index'
const state = {
sidebar: {
@ -7,7 +6,6 @@ const state = {
withoutAnimation: false
},
device: 'desktop',
language: getLanguage(),
size: Cookies.get('size') || 'medium'
}
@ -29,10 +27,6 @@ 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)
@ -49,9 +43,6 @@ const actions = {
toggleDevice({ commit }, device) {
commit('TOGGLE_DEVICE', device)
},
setLanguage({ commit }, language) {
commit('SET_LANGUAGE', language)
},
setSize({ commit }, size) {
commit('SET_SIZE', size)
}

2
src/store/modules/user.js
View File

@ -97,7 +97,7 @@ const actions = {
})
},
// Dynamically modify permissions
// dynamically modify permissions
changeRoles({ commit, dispatch }, role) {
return new Promise(async resolve => {
const token = role + '-token'

9
src/utils/get-page-title.js
View File

@ -1,13 +1,10 @@
import defaultSettings from '@/settings'
import i18n from '@/lang'
const title = defaultSettings.title || 'Vue Element Admin'
export default function getPageTitle(key) {
const hasKey = i18n.te(`route.${key}`)
if (hasKey) {
const pageName = i18n.t(`route.${key}`)
return `${pageName} - ${title}`
export default function getPageTitle(pageTitle) {
if (pageTitle) {
return `${pageTitle} - ${title}`
}
return `${title}`
}

12
src/utils/i18n.js
View File

@ -1,12 +0,0 @@
// 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
src/utils/index.js
View File

@ -1,5 +1,5 @@
/**
* Created by jiachenpan on 16/11/18.
* Created by PanJiaChen on 16/11/18.
*/
/**

2
src/utils/open-window.js
View File

@ -1,5 +1,5 @@
/**
*Created by jiachenpan on 16/11/29.
*Created by PanJiaChen on 16/11/29.
* @param {Sting} url
* @param {Sting} title
* @param {Number} w

9
src/utils/request.js
View File

@ -16,8 +16,9 @@ service.interceptors.request.use(
// do something before request is sent
if (store.getters.token) {
// let each request carry token --['X-Token'] as a custom key.
// please modify it according to the actual situation.
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
return config
@ -32,14 +33,14 @@ service.interceptors.request.use(
// response interceptor
service.interceptors.response.use(
/**
* If you want to get information such as headers or status
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code.
* You can also judge the status by HTTP Status Code
*/
response => {
const res = response.data

2
src/utils/validate.js
View File

@ -1,5 +1,5 @@
/**
* Created by jiachenpan on 16/11/18.
* Created by PanJiaChen on 16/11/18.
*/
/**

2
src/views/components-demo/avatar-upload.vue
View File

@ -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>.
{{ $t('components.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.
</aside>
<pan-thumb :image="image" />

8
src/views/components-demo/back-to-top.vue
View File

@ -1,7 +1,11 @@
<template>
<div class="components-container">
<aside>{{ $t('components.backToTopTips1') }}</aside>
<aside>{{ $t('components.backToTopTips2') }}</aside>
<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>
<div class="placeholder-container">
<div>placeholder</div>
<div>placeholder</div>

2
src/views/components-demo/dropzone.vue
View File

@ -2,7 +2,7 @@
<div class="components-container">
<aside>
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
{{ $t('components.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.
</aside>
<div class="editor-container">
<dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />

2
src/views/components-demo/markdown.vue
View File

@ -79,7 +79,7 @@ export default {
},
computed: {
language() {
return this.languageTypeList[this.$store.getters.language]
return this.languageTypeList['en']
}
},
methods: {

4
src/views/components-demo/sticky.vue
View File

@ -37,7 +37,9 @@
</sticky>
<div class="components-container">
<aside>Sticky header, {{ $t('components.stickyTips') }}</aside>
<aside>
Sticky header, When the page is scrolled to the preset position will be sticky on the top.
</aside>
<div>placeholder</div>
<div>placeholder</div>
<div>placeholder</div>

4
src/views/components-demo/tinymce.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="components-container">
<aside>
{{ $t('components.tinymceTips') }}
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html"> {{ $t('components.documentation') }}</a>
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/component/rich-editor.html">Documentation</a>
</aside>
<div>
<tinymce v-model="content" :height="300" />

19
src/views/documentation/index.vue
View File

@ -1,11 +1,24 @@
<template>
<div class="app-container documentation-container">
<a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">{{ $t('documentation.documentation') }}</a>
<a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">{{ $t('documentation.github') }}</a>
<a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
<a
class="document-btn"
target="_blank"
href="https://panjiachen.github.io/vue-element-admin-site/"
>Documentation</a>
<a
class="document-btn"
target="_blank"
href="https://github.com/PanJiaChen/vue-element-admin/"
>Github Repository</a>
<a
class="document-btn"
target="_blank"
href="https://panjiachen.gitee.io/vue-element-admin-site/zh/"
>国内文档</a>
<dropdown-menu :items="articleList" style="float:left;margin-left:50px;" title="系列文章" />
</div>
</template>
<script>
import DropdownMenu from '@/components/Share/DropdownMenu'

7
src/views/error-log/index.vue
View File

@ -2,12 +2,11 @@
<div class="errPage-container">
<ErrorA />
<ErrorB />
<!-- $t is vue-i18n global function to translate lang -->
<h3>{{ $t('errorLog.tips') }}</h3>
<h3>Please click the bug icon in the upper right corner</h3>
<aside>
{{ $t('errorLog.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.
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
{{ $t('errorLog.documentation') }}
Document introduction
</a>
</aside>
<a href="#">

6
src/views/example/components/ArticleDetail.vue
View File

@ -1,6 +1,7 @@
<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" />
@ -152,9 +153,6 @@ 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 +194,7 @@ export default {
})
},
setTagsViewTitle() {
const title = this.lang === 'zh' ? '编辑文章' : 'Edit Article'
const title = 'Edit Article'
const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
this.$store.dispatch('tagsView/updateVisitedView', route)
},

5
src/views/example/components/Warning.vue
View File

@ -1,6 +1,9 @@
<template>
<aside>
{{ $t('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
<a
href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
target="_blank"

3
src/views/excel/components/FilenameOption.vue
View File

@ -1,8 +1,7 @@
<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="$t('excel.placeholder')" style="width:350px;" prefix-icon="el-icon-document" />
<el-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:345px;" prefix-icon="el-icon-document" />
</div>
</template>

5
src/views/excel/export-excel.vue
View File

@ -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="document" @click="handleDownload">
{{ $t('excel.export') }} 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,6 +51,7 @@ 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 },

5
src/views/excel/select-excel.vue
View File

@ -1,9 +1,8 @@
<template>
<div class="app-container">
<!-- $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-input v-model="filename" placeholder="Please enter the file name (default excel-list)" style="width:350px;" prefix-icon="el-icon-document" />
<el-button :loading="downloadLoading" style="margin-bottom:20px" type="primary" icon="document" @click="handleDownload">
{{ $t('excel.selectedExport') }}
Export Selected Items
</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>

5
src/views/guide/index.vue
View File

@ -1,11 +1,12 @@
<template>
<div class="app-container">
<aside>
{{ $t('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
<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">
{{ $t('guide.button') }}
Show Guide
</el-button>
</div>
</template>

168
src/views/i18n-demo/index.vue
View File

@ -1,168 +0,0 @@
<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>

83
src/views/i18n-demo/local.js
View File

@ -1,83 +0,0 @@
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'
}
}
}

41
src/views/login/index.vue
View File

@ -3,10 +3,7 @@
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
<div class="title-container">
<h3 class="title">
{{ $t('login.title') }}
</h3>
<lang-select class="set-language" />
<h3 class="title">Login Form</h3>
</div>
<el-form-item prop="username">
@ -16,7 +13,7 @@
<el-input
ref="username"
v-model="loginForm.username"
:placeholder="$t('login.username')"
placeholder="Username"
name="username"
type="text"
tabindex="1"
@ -34,7 +31,7 @@
ref="password"
v-model="loginForm.password"
:type="passwordType"
:placeholder="$t('login.password')"
placeholder="Password"
name="password"
tabindex="2"
auto-complete="on"
@ -48,30 +45,26 @@
</el-form-item>
</el-tooltip>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">
{{ $t('login.logIn') }}
</el-button>
<el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button>
<div style="position:relative">
<div class="tips">
<span>{{ $t('login.username') }} : admin</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
<span>Username : admin</span>
<span>Password : any</span>
</div>
<div class="tips">
<span style="margin-right:18px;">
{{ $t('login.username') }} : editor
</span>
<span>{{ $t('login.password') }} : {{ $t('login.any') }}</span>
<span style="margin-right:18px;">Username : editor</span>
<span>Password : any</span>
</div>
<el-button class="thirdparty-button" type="primary" @click="showDialog=true">
{{ $t('login.thirdparty') }}
Or connect with
</el-button>
</div>
</el-form>
<el-dialog :title="$t('login.thirdparty')" :visible.sync="showDialog">
{{ $t('login.thirdpartyTips') }}
<el-dialog title="Or connect with" :visible.sync="showDialog">
Can not be simulated on local, so please combine you own business simulation! ! !
<br>
<br>
<br>
@ -82,12 +75,11 @@
<script>
import { validUsername } from '@/utils/validate'
import LangSelect from '@/components/LangSelect'
import SocialSign from './components/SocialSignin'
export default {
name: 'Login',
components: { LangSelect, SocialSign },
components: { SocialSign },
data() {
const validateUsername = (rule, value, callback) => {
if (!validUsername(value)) {
@ -300,15 +292,6 @@ $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 {

4
src/views/pdf/index.vue
View File

@ -1,6 +1,8 @@
<template>
<div class="app-container">
<aside style="margin-top:15px;">{{ $t('pdf.tips') }}</aside>
<aside style="margin-top:15px;">
Here we use window.print() to implement the feature of downloading PDF.
</aside>
<router-link target="_blank" to="/pdf/download">
<el-button type="primary">
Click to download PDF

4
src/views/permission/components/SwitchRoles.vue
View File

@ -1,9 +1,9 @@
<template>
<div>
<div style="margin-bottom:15px;">
{{ $t('permission.roles') }}: {{ roles }}
Your roles: {{ roles }}
</div>
{{ $t('permission.switchRoles') }}:
Switch roles:
<el-radio-group v-model="switchRoles">
<el-radio-button label="editor" />
<el-radio-button label="admin" />

2
src/views/permission/directive.vue
View File

@ -36,7 +36,7 @@
<div :key="'checkPermission'+key" style="margin-top:60px;">
<aside>
{{ $t('permission.tips') }}
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.
<br> e.g.
</aside>

45
src/views/permission/role.vue
View File

@ -1,8 +1,6 @@
<template>
<div class="app-container">
<el-button type="primary" @click="handleAddRole">
{{ $t('permission.addRole') }}
</el-button>
<el-button type="primary" @click="handleAddRole">New Role</el-button>
<el-table :data="rolesList" style="width: 100%;margin-top:30px;" border>
<el-table-column align="center" label="Role Key" width="220">
@ -22,12 +20,8 @@
</el-table-column>
<el-table-column align="center" label="Operations">
<template slot-scope="scope">
<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>
<el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
<el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
</template>
</el-table-column>
</el-table>
@ -46,16 +40,20 @@
/>
</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">
{{ $t('permission.cancel') }}
</el-button>
<el-button type="primary" @click="confirmRole">
{{ $t('permission.confirm') }}
</el-button>
<el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
<el-button type="primary" @click="confirmRole">Confirm</el-button>
</div>
</el-dialog>
</div>
@ -65,7 +63,6 @@
import path from 'path'
import { deepClone } from '@/utils'
import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
import i18n from '@/lang'
const defaultRole = {
key: '',
@ -103,23 +100,13 @@ export default {
async getRoutes() {
const res = await getRoutes()
this.serviceRoutes = res.data
const routes = this.generateRoutes(res.data)
this.routes = this.i18n(routes)
this.routes = this.generateRoutes(res.data)
},
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 = []

2
src/views/profile/index.vue
View File

@ -9,7 +9,6 @@
<el-col :span="18">
<el-card>
<el-tabs v-model="activeTab">
<el-tab-pane label="Activity" name="activity">
<activity />
@ -21,7 +20,6 @@
<account :user="user" />
</el-tab-pane>
</el-tabs>
</el-card>
</el-col>

72
src/views/table/complex-table.vue
View File

@ -1,27 +1,27 @@
<template>
<div class="app-container">
<div class="filter-container">
<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-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-option v-for="item in importanceOptions" :key="item" :label="item" :value="item" />
</el-select>
<el-select v-model="listQuery.type" :placeholder="$t('table.type')" clearable class="filter-item" style="width: 130px">
<el-select v-model="listQuery.type" placeholder="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">
{{ $t('table.search') }}
Search
</el-button>
<el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
{{ $t('table.add') }}
Add
</el-button>
<el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
{{ $t('table.export') }}
Export
</el-button>
<el-checkbox v-model="showReviewer" class="filter-item" style="margin-left:15px;" @change="tableKey=tableKey+1">
{{ $t('table.reviewer') }}
reviewer
</el-checkbox>
</div>
@ -35,63 +35,63 @@
style="width: 100%;"
@sort-change="sortChange"
>
<el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80">
<el-table-column label="ID" prop="id" sortable="custom" align="center" width="80">
<template slot-scope="scope">
<span>{{ scope.row.id }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.date')" width="150px" align="center">
<el-table-column label="Date" width="150px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.title')" min-width="150px">
<el-table-column label="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="$t('table.author')" width="110px" align="center">
<el-table-column label="Author" width="110px" align="center">
<template slot-scope="scope">
<span>{{ scope.row.author }}</span>
</template>
</el-table-column>
<el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
<el-table-column v-if="showReviewer" label="Reviewer" width="110px" align="center">
<template slot-scope="scope">
<span style="color:red;">{{ scope.row.reviewer }}</span>
</template>
</el-table-column>
<el-table-column :label="$t('table.importance')" width="80px">
<el-table-column label="Imp" width="80px">
<template slot-scope="scope">
<svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
</template>
</el-table-column>
<el-table-column :label="$t('table.readings')" align="center" width="95">
<el-table-column label="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="$t('table.status')" class-name="status-col" width="100">
<el-table-column label="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="$t('table.actions')" align="center" width="230" class-name="small-padding fixed-width">
<el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
<template slot-scope="{row}">
<el-button type="primary" size="mini" @click="handleUpdate(row)">
{{ $t('table.edit') }}
Edit
</el-button>
<el-button v-if="row.status!='published'" size="mini" type="success" @click="handleModifyStatus(row,'published')">
{{ $t('table.publish') }}
Publish
</el-button>
<el-button v-if="row.status!='draft'" size="mini" @click="handleModifyStatus(row,'draft')">
{{ $t('table.draft') }}
Draft
</el-button>
<el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleModifyStatus(row,'deleted')">
{{ $t('table.delete') }}
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="$t('table.type')" prop="type">
<el-form-item label="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="$t('table.date')" prop="timestamp">
<el-form-item label="Date" prop="timestamp">
<el-date-picker v-model="temp.timestamp" type="datetime" placeholder="Please pick a date" />
</el-form-item>
<el-form-item :label="$t('table.title')" prop="title">
<el-form-item label="Title" prop="title">
<el-input v-model="temp.title" />
</el-form-item>
<el-form-item :label="$t('table.status')">
<el-form-item label="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="$t('table.importance')">
<el-form-item label="Imp">
<el-rate v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max="3" style="margin-top:8px;" />
</el-form-item>
<el-form-item :label="$t('table.remark')">
<el-form-item label="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">
{{ $t('table.cancel') }}
Cancel
</el-button>
<el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
{{ $t('table.confirm') }}
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">{{ $t('table.confirm') }}</el-button>
<el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
</span>
</el-dialog>
</div>
@ -248,7 +248,7 @@ export default {
},
handleModifyStatus(row, status) {
this.$message({
message: '操作成功',
message: '操作Success',
type: 'success'
})
row.status = status
@ -295,8 +295,8 @@ export default {
this.list.unshift(this.temp)
this.dialogFormVisible = false
this.$notify({
title: '成功',
message: '创建成功',
title: 'Success',
message: 'Created Successfully',
type: 'success',
duration: 2000
})
@ -328,8 +328,8 @@ export default {
}
this.dialogFormVisible = false
this.$notify({
title: '成功',
message: '更新成功',
title: 'Success',
message: 'Update Successfully',
type: 'success',
duration: 2000
})
@ -339,8 +339,8 @@ export default {
},
handleDelete(row) {
this.$notify({
title: '成功',
message: '删除成功',
title: 'Success',
message: 'Delete Successfully',
type: 'success',
duration: 2000
})

5
src/views/table/drag-table.vue
View File

@ -52,12 +52,11 @@
</template>
</el-table-column>
</el-table>
<!-- $t is vue-i18n global function to translate lang (lang in @/lang) -->
<div class="show-d">
<el-tag style="margin-right:12px;">{{ $t('table.dragTips1') }} :</el-tag> {{ oldList }}
<el-tag>The default order :</el-tag> {{ oldList }}
</div>
<div class="show-d">
<el-tag>{{ $t('table.dragTips2') }} :</el-tag> {{ newList }}
<el-tag>The after dragging order :</el-tag> {{ newList }}
</div>
</div>
</template>

4
src/views/table/dynamic-table/index.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="app-container">
<div style="margin:0 0 5px 20px">
{{ $t('table.dynamicTips1') }}
Fixed header, sorted by header order,
</div>
<fixed-thead />
<div style="margin:30px 0 5px 20px">
{{ $t('table.dynamicTips2') }}
Not fixed header, sorted by click order
</div>
<unfixed-thead />
</div>

24
src/views/table/inline-edit-table.vue
View File

@ -37,7 +37,13 @@
<template slot-scope="{row}">
<template v-if="row.edit">
<el-input v-model="row.title" class="edit-input" size="small" />
<el-button class="cancel-btn" size="small" icon="el-icon-refresh" type="warning" @click="cancelEdit(row)">
<el-button
class="cancel-btn"
size="small"
icon="el-icon-refresh"
type="warning"
@click="cancelEdit(row)"
>
cancel
</el-button>
</template>
@ -47,10 +53,22 @@
<el-table-column align="center" label="Actions" width="120">
<template slot-scope="{row}">
<el-button v-if="row.edit" type="success" size="small" icon="el-icon-circle-check-outline" @click="confirmEdit(row)">
<el-button
v-if="row.edit"
type="success"
size="small"
icon="el-icon-circle-check-outline"
@click="confirmEdit(row)"
>
Ok
</el-button>
<el-button v-else type="primary" size="small" icon="el-icon-edit" @click="row.edit=!row.edit">
<el-button
v-else
type="primary"
size="small"
icon="el-icon-edit"
@click="row.edit=!row.edit"
>
Edit
</el-button>
</template>

8
src/views/theme/index.vue
View File

@ -3,13 +3,15 @@
<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">
{{ $t('theme.documentation') }}
Theme documentation
</a>
</div>
<div class="box-item">
<span class="field-label">{{ $t('theme.change') }} : </span>
<span class="field-label">Change Theme : </span>
<el-switch v-model="theme" />
<aside style="margin-top:15px;">{{ $t('theme.tips') }}</aside>
<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>
</div>
</el-card>

5
src/views/zip/index.vue
View File

@ -1,9 +1,8 @@
<template>
<div class="app-container">
<!-- $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-input v-model="filename" placeholder="Please enter the file name (default file)" style="width:300px;" prefix-icon="el-icon-document" />
<el-button :loading="downloadLoading" style="margin-bottom:20px;" type="primary" icon="document" @click="handleDownload">
{{ $t('zip.export') }} 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">

2
vue.config.js
View File

@ -99,7 +99,7 @@ module.exports = {
.end()
config
// https://webpack.js.org/configuration/devtool/#development
// https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)