diff --git a/mock/article.js b/mock/article.js
index 45b75296..bc236eb9 100644
--- a/mock/article.js
+++ b/mock/article.js
@@ -3,7 +3,7 @@ import Mock from 'mockjs'
const List = []
const count = 100
-const baseContent = '<p>我是测试数据我是测试数据</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
+const baseContent = '<p>I am testing data, I am testing data.</p><p><img src="https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943"></p>'
const image_uri = 'https://wpimg.wallstcn.com/e4558086-631c-425c-9430-56ffb46e70b3'
for (let i = 0; i < count; i++) {
diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
index c094037f..36522f4a 100644
--- a/src/components/BackToTop/index.vue
+++ b/src/components/BackToTop/index.vue
@@ -1,12 +1,7 @@
<template>
<transition :name="transitionName">
<div v-show="visible" :style="customStyle" class="back-to-ceiling" @click="backToTop">
- <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height: 16px; width: 16px;">
- <title>回到顶部</title>
- <g>
- <path d="M12.036 15.59c0 .55-.453.995-.997.995H5.032c-.55 0-.997-.445-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29c.39-.39 1.026-.385 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" fill-rule="evenodd" />
- </g>
- </svg>
+ <svg width="16" height="16" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg" class="Icon Icon--backToTopArrow" aria-hidden="true" style="height:16px;width:16px"><path d="M12.036 15.59a1 1 0 0 1-.997.995H5.032a.996.996 0 0 1-.997-.996V8.584H1.03c-1.1 0-1.36-.633-.578-1.416L7.33.29a1.003 1.003 0 0 1 1.412 0l6.878 6.88c.782.78.523 1.415-.58 1.415h-3.004v7.004z" /></svg>
</div>
</transition>
</template>
diff --git a/src/components/JsonEditor/index.vue b/src/components/JsonEditor/index.vue
index 81715f5d..07b282e4 100644
--- a/src/components/JsonEditor/index.vue
+++ b/src/components/JsonEditor/index.vue
@@ -25,8 +25,8 @@ export default {
},
watch: {
value(value) {
- const editor_value = this.jsonEditor.getValue()
- if (value !== editor_value) {
+ const editorValue = this.jsonEditor.getValue()
+ if (value !== editorValue) {
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
}
}
diff --git a/src/components/Kanban/index.vue b/src/components/Kanban/index.vue
index c2cb4691..82f7dd7e 100644
--- a/src/components/Kanban/index.vue
+++ b/src/components/Kanban/index.vue
@@ -15,6 +15,7 @@
</draggable>
</div>
</template>
+
<script>
import draggable from 'vuedraggable'
diff --git a/src/components/ThemePicker/index.vue b/src/components/ThemePicker/index.vue
index 0a556248..3879c5ad 100644
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@@ -8,19 +8,28 @@
</template>
<script>
-
const version = require('element-ui/package.json').version // element-ui version from node_modules
const ORIGINAL_THEME = '#409EFF' // default color
-import defaultSettings from '@/settings'
export default {
data() {
return {
chalk: '', // content of theme-chalk css
- theme: defaultSettings.theme
+ theme: ''
+ }
+ },
+ computed: {
+ defaultTheme() {
+ return this.$store.state.settings.theme
}
},
watch: {
+ defaultTheme: {
+ handler: function(val, oldVal) {
+ this.theme = val
+ },
+ immediate: true
+ },
async theme(val) {
const oldVal = this.chalk ? this.theme : ORIGINAL_THEME
if (typeof val !== 'string') return
diff --git a/src/components/Tinymce/components/EditorImage.vue b/src/components/Tinymce/components/EditorImage.vue
index b3a4a2be..d4a98e84 100644
--- a/src/components/Tinymce/components/EditorImage.vue
+++ b/src/components/Tinymce/components/EditorImage.vue
@@ -1,7 +1,7 @@
<template>
<div class="upload-container">
<el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">
- 上传图片
+ upload
</el-button>
<el-dialog :visible.sync="dialogVisible">
<el-upload
@@ -16,14 +16,14 @@
list-type="picture-card"
>
<el-button size="small" type="primary">
- 点击上传
+ Click upload
</el-button>
</el-upload>
<el-button @click="dialogVisible = false">
- 取 消
+ Cancel
</el-button>
<el-button type="primary" @click="handleSubmit">
- 确 定
+ Confirm
</el-button>
</el-dialog>
</div>
@@ -54,7 +54,7 @@ export default {
handleSubmit() {
const arr = Object.keys(this.listObj).map(v => this.listObj[v])
if (!this.checkAllSuccess()) {
- this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
+ this.$message('Please wait for all images to be uploaded successfully. If there is a network problem, please refresh the page and upload again!')
return
}
this.$emit('successCBK', arr)
diff --git a/src/components/Upload/SingleImage.vue b/src/components/Upload/SingleImage.vue
index ecec20a9..d16bbf37 100644
--- a/src/components/Upload/SingleImage.vue
+++ b/src/components/Upload/SingleImage.vue
@@ -26,7 +26,6 @@
</template>
<script>
-// 预览效果见付费文章
import { getToken } from '@/api/qiniu'
export default {
diff --git a/src/directive/el-table/adaptive.js b/src/directive/el-table/adaptive.js
index 3fa29c91..8beacff1 100644
--- a/src/directive/el-table/adaptive.js
+++ b/src/directive/el-table/adaptive.js
@@ -1,4 +1,3 @@
-
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
/**
diff --git a/src/directive/el-table/index.js b/src/directive/el-table/index.js
index d4cf406d..d3d45150 100644
--- a/src/directive/el-table/index.js
+++ b/src/directive/el-table/index.js
@@ -1,4 +1,3 @@
-
import adaptive from './adaptive'
const install = function(Vue) {
diff --git a/src/directive/permission/permission.js b/src/directive/permission/permission.js
index 1fc8f136..b27f24da 100644
--- a/src/directive/permission/permission.js
+++ b/src/directive/permission/permission.js
@@ -1,4 +1,3 @@
-
import store from '@/store'
export default {
diff --git a/src/filters/index.js b/src/filters/index.js
index 86e768d8..051000c1 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -1,4 +1,4 @@
-// set function parseTime,formatTime to filter
+// import parseTime, formatTime and set to filter
export { parseTime, formatTime } from '@/utils'
/**
diff --git a/src/main.js b/src/main.js
index 007f2b92..205b3c84 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,7 @@ import Vue from 'vue'
import Cookies from 'js-cookie'
-import 'normalize.css/normalize.css' // A modern alternative to CSS resets
+import 'normalize.css/normalize.css' // a modern alternative to CSS resets
import Element from 'element-ui'
import './styles/element-variables.scss'
@@ -19,16 +19,20 @@ import './utils/error-log' // error log
import * as filters from './filters' // global filters
-import { mockXHR } from '../mock' // simulation data
-
-// mock api in github pages site build
-if (process.env.NODE_ENV === 'production') { mockXHR() }
+/**
+ * If you don't want to use mock-server
+ * you want to use mockjs for request interception
+ * you can execute:
+ *
+ * import { mockXHR } from '../mock'
+ * mockXHR()
+ */
Vue.use(Element, {
size: Cookies.get('size') || 'medium' // set element-ui default size
})
-// register global utility filters.
+// register global utility filters
Object.keys(filters).forEach(key => {
Vue.filter(key, filters[key])
})
diff --git a/src/permission.js b/src/permission.js
index 7cc2a5cf..750aeab6 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -4,6 +4,7 @@ import { Message } from 'element-ui'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar style
import { getToken } from '@/utils/auth' // get token from cookie
+import getPageTitle from '@/utils/get-page-title'
NProgress.configure({ showSpinner: false }) // NProgress Configuration
@@ -13,6 +14,9 @@ router.beforeEach(async(to, from, next) => {
// start progress bar
NProgress.start()
+ // set page title
+ document.title = getPageTitle(to.meta.title)
+
// determine whether the user has logged in
const hasToken = getToken()
diff --git a/src/router/index.js b/src/router/index.js
index 862af30a..9e21cb90 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -118,8 +118,9 @@ export const asyncRoutes = [
{
path: '/permission',
component: Layout,
- redirect: '/permission/index',
+ redirect: '/permission/page',
alwaysShow: true, // will always show the root menu
+ name: 'Permission',
meta: {
title: 'Permission',
icon: 'lock',
@@ -301,6 +302,7 @@ export const asyncRoutes = [
component: Layout,
redirect: '/zip/download',
alwaysShow: true,
+ name: 'Zip',
meta: { title: 'Zip', icon: 'zip' },
children: [
{
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 989cd56b..0035ea36 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -1,4 +1,4 @@
-/** When your routing table is too long, you can split it into small modules**/
+/** When your routing table is too long, you can split it into small modules **/
import Layout from '@/layout'
diff --git a/src/router/modules/nested.js b/src/router/modules/nested.js
index 749bc1cf..48033ed1 100644
--- a/src/router/modules/nested.js
+++ b/src/router/modules/nested.js
@@ -1,4 +1,4 @@
-/** When your routing table is too long, you can split it into small modules**/
+/** When your routing table is too long, you can split it into small modules **/
import Layout from '@/layout'
diff --git a/src/router/modules/table.js b/src/router/modules/table.js
index c7e3f390..ec28c527 100644
--- a/src/router/modules/table.js
+++ b/src/router/modules/table.js
@@ -1,4 +1,4 @@
-/** When your routing table is too long, you can split it into small modules**/
+/** When your routing table is too long, you can split it into small modules **/
import Layout from '@/layout'
diff --git a/src/settings.js b/src/settings.js
index e7ad4e1d..1ebc7f29 100644
--- a/src/settings.js
+++ b/src/settings.js
@@ -1,7 +1,5 @@
-import variables from '@/styles/element-variables.scss'
-
-export default {
- theme: variables.theme,
+module.exports = {
+ title: 'Vue Element Admin',
/**
* @type {boolean} true | false
diff --git a/src/store/modules/permission.js b/src/store/modules/permission.js
index 820ca46b..bd35252c 100644
--- a/src/store/modules/permission.js
+++ b/src/store/modules/permission.js
@@ -1,7 +1,7 @@
import { asyncRoutes, constantRoutes } from '@/router'
/**
- * 通过meta.role判断是否与当前用户权限匹配
+ * Use meta.role to determine if the current user has permission
* @param roles
* @param route
*/
@@ -14,7 +14,7 @@ function hasPermission(roles, route) {
}
/**
- * 递归过滤异步路由表，返回符合用户角色权限的路由表
+ * Filter asynchronous routing tables by recursion
* @param routes asyncRoutes
* @param roles
*/
diff --git a/src/store/modules/settings.js b/src/store/modules/settings.js
index 8522a5aa..e389af79 100644
--- a/src/store/modules/settings.js
+++ b/src/store/modules/settings.js
@@ -1,8 +1,10 @@
+import variables from '@/styles/element-variables.scss'
import defaultSettings from '@/settings'
-const { showSettings, tagsView, fixedHeader, sidebarLogo, theme } = defaultSettings
+
+const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const state = {
- theme: theme,
+ theme: variables.theme,
showSettings: showSettings,
tagsView: tagsView,
fixedHeader: fixedHeader,
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
index 494dcfa4..9422dd18 100644
--- a/src/styles/element-ui.scss
+++ b/src/styles/element-ui.scss
@@ -1,4 +1,4 @@
-//覆盖一些element-ui样式
+// cover some element-ui styles
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 93f2157e..96095ef6 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -96,14 +96,18 @@ div:focus {
}
}
-code {
+aside {
background: #eef1f6;
- padding: 15px 16px;
+ padding: 8px 24px;
margin-bottom: 20px;
+ border-radius: 2px;
display: block;
- line-height: 36px;
- font-size: 15px;
- font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
+ line-height: 32px;
+ font-size: 16px;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+ color: #2c3e50;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
a {
color: #337ab7;
@@ -115,20 +119,6 @@ code {
}
}
-.warn-content {
- background: rgba(66, 185, 131, .1);
- border-radius: 2px;
- padding: 16px;
- padding: 1rem;
- line-height: 1.6rem;
- word-spacing: .05rem;
-
- a {
- color: #42b983;
- font-weight: 600;
- }
-}
-
//main-container全局样式
.app-container {
padding: 20px;
diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss
index 525a65b9..e55f8656 100644
--- a/src/styles/sidebar.scss
+++ b/src/styles/sidebar.scss
@@ -1,6 +1,5 @@
#app {
- // 主体区域 Main container
.main-container {
min-height: 100%;
transition: margin-left .28s;
@@ -8,7 +7,6 @@
position: relative;
}
- // 侧边栏 Sidebar container
.sidebar-container {
transition: width 0.28s;
width: $sideBarWidth !important;
@@ -22,7 +20,7 @@
z-index: 1001;
overflow: hidden;
- //reset element-ui css
+ // reset element-ui css
.horizontal-collapse-transition {
transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
}
@@ -149,7 +147,7 @@
min-width: $sideBarWidth !important;
}
- // 适配移动端, Mobile responsive
+ // mobile responsive
.mobile {
.main-container {
margin-left: 0px;
diff --git a/src/styles/transition.scss b/src/styles/transition.scss
index 7b5e4bfd..4cb27cc8 100644
--- a/src/styles/transition.scss
+++ b/src/styles/transition.scss
@@ -1,6 +1,6 @@
-//global transition css
+// global transition css
-/*fade*/
+/* fade */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.28s;
@@ -11,7 +11,7 @@
opacity: 0;
}
-/*fade-transform*/
+/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
transition: all .5s;
@@ -27,7 +27,7 @@
transform: translateX(30px);
}
-/*breadcrumb transition*/
+/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
transition: all .5s;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 98d7b672..a19c27c1 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -8,10 +8,10 @@ $tiffany: #4AB7BD;
$yellow:#FEC171;
$panGreen: #30B08F;
-//sidebar
+// sidebar
$menuText:#bfcbd9;
$menuActiveText:#409EFF;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
$menuBg:#304156;
$menuHover:#263445;
diff --git a/src/utils/error-log.js b/src/utils/error-log.js
index c508c789..a7f5b55f 100644
--- a/src/utils/error-log.js
+++ b/src/utils/error-log.js
@@ -4,10 +4,10 @@ import { isString, isArray } from '@/utils/validate'
import settings from '@/settings'
// you can set in settings.js
-// errorLog:'production' | ['production','development']
+// errorLog:'production' | ['production', 'development']
const { errorLog: needErrorLog } = settings
-function checkNeed(arg) {
+function checkNeed() {
const env = process.env.NODE_ENV
if (isString(needErrorLog)) {
return env === needErrorLog
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
new file mode 100644
index 00000000..4b6604cd
--- /dev/null
+++ b/src/utils/get-page-title.js
@@ -0,0 +1,13 @@
+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}`
+ }
+ return `${title}`
+}
diff --git a/src/utils/request.js b/src/utils/request.js
index d2422c46..d3c25c00 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -5,23 +5,25 @@ import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
- baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
- withCredentials: true, // 跨域请求时发送 cookies
+ baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
+ withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
- // Do something before request is sent
+ // do something before request is sent
+
if (store.getters.token) {
- // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
+ // let each request carry token --['X-Token'] as a custom key.
+ // please modify it according to the actual situation.
config.headers['X-Token'] = getToken()
}
return config
},
error => {
- // Do something with request error
+ // do something with request error
console.log(error) // for debug
return Promise.reject(error)
}
@@ -33,31 +35,33 @@ service.interceptors.response.use(
* If you want to get information such as headers or status
* Please return response => response
*/
+
/**
- * 下面的注释为通过在response里，自定义code来标示请求状态
- * 当code返回如下情况则说明权限有问题，登出并返回到登录页
- * 如想通过 XMLHttpRequest 来状态码标识 逻辑可写在下面error中
- * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
+ * Determine the request status by custom code
+ * Here is just an example
+ * You can also judge the status by HTTP Status Code.
*/
response => {
const res = response.data
+
+ // if the custom code is not 20000, it is judged as an error.
if (res.code !== 20000) {
Message({
message: res.message || 'error',
type: 'error',
duration: 5 * 1000
})
- // 50008:非法的token; 50012:其他客户端登录了; 50014:Token 过期了;
+
+ // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
- // 请自行在引入 MessageBox
- // import { Message, MessageBox } from 'element-ui'
- MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
- confirmButtonText: '重新登录',
- cancelButtonText: '取消',
+ // to re-login
+ MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
+ confirmButtonText: 'Re-Login',
+ cancelButtonText: 'Cancel',
type: 'warning'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
- location.reload() // 为了重新实例化vue-router对象 避免bug
+ location.reload()
})
})
}
diff --git a/src/views/components-demo/avatar-upload.vue b/src/views/components-demo/avatar-upload.vue
index ae6d939f..41bb9bc7 100644
--- a/src/views/components-demo/avatar-upload.vue
+++ b/src/views/components-demo/avatar-upload.vue
@@ -1,9 +1,9 @@
<template>
<div class="components-container">
- <code>This is based on
+ <aside>This is based on
<a class="link-type" href="//github.com/dai-siki/vue-image-crop-upload"> vue-image-crop-upload</a>.
Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.
- </code>
+ </aside>
<pan-thumb :image="image" />
diff --git a/src/views/components-demo/back-to-top.vue b/src/views/components-demo/back-to-top.vue
index 93337834..df5370be 100644
--- a/src/views/components-demo/back-to-top.vue
+++ b/src/views/components-demo/back-to-top.vue
@@ -1,7 +1,11 @@
<template>
<div class="components-container">
- <code>When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner</code>
- <code>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</code>
+ <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>
@@ -113,8 +117,7 @@
<div>placeholder</div>
<div>placeholder</div>
</div>
- <!--可自定义按钮的样式、show/hide临界点、返回的位置 -->
- <!--如需文字提示，可在外部添加element的<el-tooltip></el-tooltip>元素 -->
+ <!-- you can add element-ui's tooltip -->
<el-tooltip placement="top" content="tooltip">
<back-to-top :custom-style="myBackToTopStyle" :visibility-height="300" :back-position="50" transition-name="fade" />
</el-tooltip>
@@ -129,6 +132,7 @@ export default {
components: { BackToTop },
data() {
return {
+ // customizable button style, show/hide critical point, return position
myBackToTopStyle: {
right: '50px',
bottom: '50px',
diff --git a/src/views/components-demo/count-to.vue b/src/views/components-demo/count-to.vue
index 9fae2694..70681df6 100644
--- a/src/views/components-demo/count-to.vue
+++ b/src/views/components-demo/count-to.vue
@@ -1,8 +1,8 @@
<template>
<div class="components-container">
- <p class="warn-content">
+ <aside>
<a href="https://github.com/PanJiaChen/vue-countTo" target="_blank">countTo-component</a>
- </p>
+ </aside>
<count-to
ref="example"
:start-val="_startVal"
@@ -45,9 +45,9 @@
<input v-model="setSuffix" name="suffixInput">
</label>
</div>
- <code><count-to :start-val='{{ _startVal }}' :end-val='{{ _endVal }}' :duration='{{ _duration }}'
+ <aside><count-to :start-val='{{ _startVal }}' :end-val='{{ _endVal }}' :duration='{{ _duration }}'
:decimals='{{ _decimals }}' :separator='{{ _separator }}' :prefix='{{ _prefix }}' :suffix='{{ _suffix }}'
- :autoplay=false></code>
+ :autoplay=false></aside>
</div>
</template>
diff --git a/src/views/components-demo/dnd-list.vue b/src/views/components-demo/dnd-list.vue
index 0e4c215a..e299fa68 100644
--- a/src/views/components-demo/dnd-list.vue
+++ b/src/views/components-demo/dnd-list.vue
@@ -1,8 +1,8 @@
<template>
<div class="components-container">
- <code>drag-list base on
+ <aside>drag-list base on
<a href="https://github.com/SortableJS/Vue.Draggable" target="_blank">Vue.Draggable</a>
- </code>
+ </aside>
<div class="editor-container">
<dnd-list :list1="list1" :list2="list2" list1-title="List" list2-title="Article pool" />
</div>
diff --git a/src/views/components-demo/dropzone.vue b/src/views/components-demo/dropzone.vue
index 77e1ae59..a8c10400 100644
--- a/src/views/components-demo/dropzone.vue
+++ b/src/views/components-demo/dropzone.vue
@@ -1,9 +1,9 @@
<template>
<div class="components-container">
- <code>
+ <aside>
Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.
- </code>
+ </aside>
<div class="editor-container">
<dropzone id="myVueDropzone" url="https://httpbin.org/post" @dropzone-removedFile="dropzoneR" @dropzone-success="dropzoneS" />
</div>
diff --git a/src/views/components-demo/json-editor.vue b/src/views/components-demo/json-editor.vue
index 01fed710..85bf3834 100644
--- a/src/views/components-demo/json-editor.vue
+++ b/src/views/components-demo/json-editor.vue
@@ -1,10 +1,10 @@
<template>
<div class="components-container">
- <code>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
+ <aside>Json-Editor is base on <a href="https://github.com/codemirror/CodeMirror" target="_blank">CodeMirrorr</a>. Lint
base on <a
href="https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js"
target="_blank"
- >json-lint</a>.</code>
+ >json-lint</a>.</aside>
<div class="editor-container">
<json-editor ref="jsonEditor" v-model="value" />
</div>
diff --git a/src/views/components-demo/markdown.vue b/src/views/components-demo/markdown.vue
index e9796a4b..25cf3e37 100644
--- a/src/views/components-demo/markdown.vue
+++ b/src/views/components-demo/markdown.vue
@@ -1,13 +1,13 @@
<template>
<div class="components-container">
- <code>Markdown is based on
+ <aside>Markdown is based on
<a href="https://github.com/nhnent/tui.editor" target="_blank">tui.editor</a> ，simply wrapped with Vue.
<a
target="_blank"
href="https://panjiachen.github.io/vue-element-admin-site/feature/component/markdown-editor.html"
>
Documentation </a>
- </code>
+ </aside>
<div class="editor-container">
<el-tag class="tag-title">
diff --git a/src/views/components-demo/split-pane.vue b/src/views/components-demo/split-pane.vue
index 4259abea..7dba353f 100644
--- a/src/views/components-demo/split-pane.vue
+++ b/src/views/components-demo/split-pane.vue
@@ -1,10 +1,10 @@
<template>
<div class="components-container">
- <code><strong>SplitPane</strong> If you've used
+ <aside><strong>SplitPane</strong> If you've used
<a href="https://codepen.io/" target="_blank"> codepen</a>,
<a href="https://jsfiddle.net/" target="_blank"> jsfiddle </a>will not be unfamiliar.
<a href="https://github.com/PanJiaChen/vue-split-pane" target="_blank"> Github repository</a>
- </code>
+ </aside>
<split-pane split="vertical" @resize="resize">
<template slot="paneL">
<div class="left-container" />
diff --git a/src/views/components-demo/sticky.vue b/src/views/components-demo/sticky.vue
index f2abab99..f01d088a 100644
--- a/src/views/components-demo/sticky.vue
+++ b/src/views/components-demo/sticky.vue
@@ -37,7 +37,9 @@
</sticky>
<div class="components-container">
- <code>Sticky header, When the page is scrolled to the preset position will be sticky on the top.</code>
+ <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>
diff --git a/src/views/components-demo/tinymce.vue b/src/views/components-demo/tinymce.vue
index 81b96e2a..c70179fa 100644
--- a/src/views/components-demo/tinymce.vue
+++ b/src/views/components-demo/tinymce.vue
@@ -1,9 +1,9 @@
<template>
<div class="components-container">
- <code>
+ <aside>
Rich text is a core feature of the management backend, but at the same time it is a place with lots of pits. In the process of selecting rich texts, I also took a lot of detours. The common rich texts on the market have been basically used, and I finally chose Tinymce. See the more detailed rich text comparison and introduction.
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/component/rich-editor.html">Documentation</a>
- </code>
+ </aside>
<div>
<tinymce v-model="content" :height="300" />
</div>
diff --git a/src/views/error-log/index.vue b/src/views/error-log/index.vue
index 745a66fb..e999c85b 100644
--- a/src/views/error-log/index.vue
+++ b/src/views/error-log/index.vue
@@ -3,12 +3,12 @@
<ErrorA />
<ErrorB />
<h3>Please click the bug icon in the upper right corner</h3>
- <code>
+ <aside>
Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.
<a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/error.html">
Document introduction
</a>
- </code>
+ </aside>
<a href="#">
<img src="https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif">
</a>
diff --git a/src/views/example/components/ArticleDetail.vue b/src/views/example/components/ArticleDetail.vue
index 58574ab0..b1aa8df6 100644
--- a/src/views/example/components/ArticleDetail.vue
+++ b/src/views/example/components/ArticleDetail.vue
@@ -6,10 +6,10 @@
<PlatformDropdown v-model="postForm.platforms" />
<SourceUrlDropdown v-model="postForm.source_uri" />
<el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm">
- 发布
+ Publush
</el-button>
<el-button v-loading="loading" type="warning" @click="draftForm">
- 草稿
+ Draft
</el-button>
</sticky>
@@ -20,28 +20,28 @@
<el-col :span="24">
<el-form-item style="margin-bottom: 40px;" prop="title">
<MDinput v-model="postForm.title" :maxlength="100" name="name" required>
- 标题
+ Title
</MDinput>
</el-form-item>
<div class="postInfo-container">
<el-row>
<el-col :span="8">
- <el-form-item label-width="45px" label="作者:" class="postInfo-container-item">
- <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="搜索用户">
+ <el-form-item label-width="60px" label="Author:" class="postInfo-container-item">
+ <el-select v-model="postForm.author" :remote-method="getRemoteUserList" filterable default-first-option remote placeholder="Search user">
<el-option v-for="(item,index) in userListOptions" :key="item+index" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
- <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
- <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" />
+ <el-form-item label-width="120px" label="Publush Time:" class="postInfo-container-item">
+ <el-date-picker v-model="postForm.display_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="Select date and time" />
</el-form-item>
</el-col>
<el-col :span="6">
- <el-form-item label-width="60px" label="重要性:" class="postInfo-container-item">
+ <el-form-item label-width="90px" label="Importance:" class="postInfo-container-item">
<el-rate
v-model="postForm.importance"
:max="3"
@@ -57,8 +57,8 @@
</el-col>
</el-row>
- <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
- <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="请输入内容" />
+ <el-form-item style="margin-bottom: 40px;" label-width="70px" label="Summary:">
+ <el-input v-model="postForm.content_short" :rows="1" type="textarea" class="article-textarea" autosize placeholder="Please enter the content" />
<span v-show="contentShortLength" class="word-counter">{{ contentShortLength }}字</span>
</el-form-item>
diff --git a/src/views/example/components/Dropdown/Comment.vue b/src/views/example/components/Dropdown/Comment.vue
index 26509611..d34b2b90 100644
--- a/src/views/example/components/Dropdown/Comment.vue
+++ b/src/views/example/components/Dropdown/Comment.vue
@@ -1,17 +1,17 @@
<template>
<el-dropdown :show-timeout="100" trigger="click">
<el-button plain>
- {{ !comment_disabled?'评论已打开':'评论已关闭' }}
+ {{ !comment_disabled?'Comment: opened':'Comment: closed' }}
<i class="el-icon-caret-bottom el-icon--right" />
</el-button>
<el-dropdown-menu slot="dropdown" class="no-padding">
<el-dropdown-item>
<el-radio-group v-model="comment_disabled" style="padding: 10px;">
<el-radio :label="true">
- 关闭评论
+ Close comment
</el-radio>
<el-radio :label="false">
- 打开评论
+ Open comment
</el-radio>
</el-radio-group>
</el-dropdown-item>
diff --git a/src/views/example/components/Dropdown/Platform.vue b/src/views/example/components/Dropdown/Platform.vue
index 98fcaf28..0a527264 100644
--- a/src/views/example/components/Dropdown/Platform.vue
+++ b/src/views/example/components/Dropdown/Platform.vue
@@ -1,7 +1,7 @@
<template>
<el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
<el-button plain>
- 平台({{ platforms.length }})
+ Platfroms({{ platforms.length }})
<i class="el-icon-caret-bottom el-icon--right" />
</el-button>
<el-dropdown-menu slot="dropdown" class="no-border">
diff --git a/src/views/example/components/Dropdown/SourceUrl.vue b/src/views/example/components/Dropdown/SourceUrl.vue
index 21a58907..8f47485a 100644
--- a/src/views/example/components/Dropdown/SourceUrl.vue
+++ b/src/views/example/components/Dropdown/SourceUrl.vue
@@ -1,14 +1,14 @@
<template>
<el-dropdown :show-timeout="100" trigger="click">
<el-button plain>
- 外链
+ Link
<i class="el-icon-caret-bottom el-icon--right" />
</el-button>
<el-dropdown-menu slot="dropdown" class="no-padding no-border" style="width:400px">
<el-form-item label-width="0px" style="margin-bottom: 0px" prop="source_uri">
- <el-input v-model="source_uri" placeholder="请输入内容">
+ <el-input v-model="source_uri" placeholder="Please enter the content">
<template slot="prepend">
- 填写url
+ URL
</template>
</el-input>
</el-form-item>
diff --git a/src/views/example/components/Warning.vue b/src/views/example/components/Warning.vue
index bee172d4..d24fe291 100644
--- a/src/views/example/components/Warning.vue
+++ b/src/views/example/components/Warning.vue
@@ -1,11 +1,10 @@
<template>
- <p class="warn-content">
- 创建和编辑页面是不能被keep-alive 缓存的，因为keep-alive 的include 目前不支持根据路由来缓存，所以目前都是基于component name 来缓存的，如果你想要实现缓存的效果，可以使用localstorage 等浏览器缓存方案。或者不要使用keep-alive
- 的include，直接缓存所有页面。详情见
+ <aside>
+ {{ $t('example.warning') }}
<a
href="https://panjiachen.github.io/vue-element-admin-site/guide/essentials/tags-view.html"
target="_blank"
- >文档</a>
- </p>
+ >Document</a>
+ </aside>
</template>
diff --git a/src/views/guide/index.vue b/src/views/guide/index.vue
index e267bd64..4897c8fb 100644
--- a/src/views/guide/index.vue
+++ b/src/views/guide/index.vue
@@ -1,10 +1,10 @@
<template>
<div class="app-container">
- <p class="warn-content">
+ <aside>
The guide page is useful for some people who entered the project for the first time. You can briefly introduce the
features of the project. Demo is based on
<a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
- </p>
+ </aside>
<el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
Show Guide
</el-button>
diff --git a/src/views/pdf/index.vue b/src/views/pdf/index.vue
index 8fec1f88..86278b38 100644
--- a/src/views/pdf/index.vue
+++ b/src/views/pdf/index.vue
@@ -1,6 +1,8 @@
<template>
<div class="app-container">
- <code style="margin-top:15px;">Here we use window.print() to implement the feature of downloading PDF.</code>
+ <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
diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue
index 7f8c906a..85478895 100644
--- a/src/views/permission/directive.vue
+++ b/src/views/permission/directive.vue
@@ -35,10 +35,10 @@
</div>
<div :key="'checkPermission'+key" style="margin-top:60px;">
- <code>
+ <aside>
In some cases, using v-permission will have no effect. For example: Element-UI's Tab component or el-table-column and other scenes that dynamically render dom. You can only do this with v-if.
<br> e.g.
- </code>
+ </aside>
<el-tabs type="border-card" style="width:550px;">
<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
diff --git a/src/views/svg-icons/index.vue b/src/views/svg-icons/index.vue
index 9733bc3a..2715b5ea 100644
--- a/src/views/svg-icons/index.vue
+++ b/src/views/svg-icons/index.vue
@@ -1,9 +1,9 @@
<template>
<div class="icons-container">
- <p class="warn-content">
+ <aside>
<a href="https://panjiachen.github.io/vue-element-admin-site/guide/advanced/icon.html" target="_blank">Add and use
</a>
- </p>
+ </aside>
<el-tabs type="border-card">
<el-tab-pane label="Icons">
<div v-for="item of iconsMap" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
diff --git a/src/views/table/complex-table.vue b/src/views/table/complex-table.vue
index fbc8057f..fe266465 100644
--- a/src/views/table/complex-table.vue
+++ b/src/views/table/complex-table.vue
@@ -148,9 +148,9 @@
<script>
import { fetchList, fetchPv, createArticle, updateArticle } from '@/api/article'
-import waves from '@/directive/waves' // Waves directive
+import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
-import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
+import Pagination from '@/components/Pagination' // secondary package based on el-pagination
const calendarTypeOptions = [
{ key: 'CN', display_name: 'China' },
@@ -159,7 +159,7 @@ const calendarTypeOptions = [
{ key: 'EU', display_name: 'Eurozone' }
]
-// arr to obj ,such as { CN : "China", US : "USA" }
+// arr to obj, such as { CN : "China", US : "USA" }
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
acc[cur.key] = cur.display_name
return acc
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index a5fc0f8c..0af7711a 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -9,7 +9,9 @@
<div class="box-item">
<span class="field-label">Change Theme : </span>
<el-switch v-model="theme" />
- <code 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.</code>
+ <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>
diff --git a/vue.config.js b/vue.config.js
index cbd79510..bae56d78 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,12 +1,12 @@
'use strict'
const path = require('path')
-const pkg = require('./package.json')
+const defaultSettings = require('./src/settings.js')
function resolve(dir) {
return path.join(__dirname, dir)
}
-const name = pkg.name || 'vue-element-admin' // page title
+const name = defaultSettings.title || 'vue Element Admin' // page title
const port = 9527 // dev port
// All configuration item explanations can be find in https://cli.vuejs.org/config/
@@ -86,6 +86,7 @@ module.exports = {
.end()
config
+ // https://webpack.js.org/configuration/devtool/#development
.when(process.env.NODE_ENV === 'development',
config => config.devtool('cheap-source-map')
)