perf[i18n]: refine code comments

src/errorLog.js

@@ -3,7 +3,10 @@ import store from './store'
 
 // you can set only in production env show the error-log
 // if (process.env.NODE_ENV === 'production') {
+
 Vue.config.errorHandler = function(err, vm, info, a) {
+  // Don't ask me why I use Vue.nextTick, it just a hack.
+  // detail see https://forum.vuejs.org/t/dispatch-in-vue-config-errorhandler-has-some-problem/23500
   Vue.nextTick(() => {
     store.dispatch('addErrorLog', {
       err,
@@ -14,4 +17,5 @@ Vue.config.errorHandler = function(err, vm, info, a) {
     console.error(err, info)
   })
 }
+
 // }

src/icons/svg/trendChart1.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994155726" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8554" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M44.521739 0h44.521739v979.478261H44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM712.347826 712.347826h44.521739v267.130435h-44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8555"></path></svg>

src/icons/svg/trendChart2.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994177895" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8894" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M712.347826 0h44.521739v979.478261h-44.521739zM267.130435 534.26087h44.521739v445.217391H267.130435zM489.73913 311.652174h44.52174v667.826087h-44.52174zM44.521739 712.347826h44.521739v267.130435H44.521739zM934.956522 445.217391h44.521739v534.26087h-44.521739z" fill="" p-id="8895"></path></svg>

src/icons/svg/trendChart3.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1503994166937" class="icon" style="" viewBox="0 0 1131 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8786" xmlns:xlink="http://www.w3.org/1999/xlink" width="70.6875" height="64"><defs><style type="text/css"></style></defs><path d="M0 0h53.894737v970.105263H0zM269.473684 431.157895h53.894737v538.947368H269.473684zM538.947368 161.684211h53.894737v808.421052h-53.894737zM808.421053 646.736842h53.894736v323.368421h-53.894736zM1077.894737 323.368421h53.894737v646.736842h-53.894737z" fill="" p-id="8787"></path></svg>

src/lang/en.js

@@ -71,18 +71,18 @@ export default {
   },
   components: {
     documentation: 'Documentation',
-    tinymceTips: 'Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the final trade-off is the selection of Tinymce.See documentation for more detailed rich text editor comparisons and introductions',
+    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 to qiniu, So instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the specific code in @/components/Dropzone.',
+    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.'
+    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 Drag after order',
+    dragTips2: 'The after dragging order',
     title: 'Title',
     importance: 'Imp',
     type: 'Type',
@@ -120,6 +120,7 @@ export default {
   },
   theme: {
     change: 'Theme change',
-    documentation: 'Theme documentation'
+    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.'
   }
 }

src/lang/zh.js

@@ -120,6 +120,7 @@ export default {
   },
   theme: {
     change: '换肤',
-    documentation: '换肤文档'
+    documentation: '换肤文档',
+    tips: 'Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。'
   }
 }

src/main.js

@@ -15,12 +15,12 @@ import i18n from './lang' // Internationalization
 import './icons' // icon
 import './errorLog'// error log
 import './permission' // permission control
-import './mock' // simulation data generator
+import './mock' // simulation data
 
-import * as filters from './filters' // global filter
+import * as filters from './filters' // global filters
 
 Vue.use(Element, {
-  size: 'medium',
+  size: 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)
 })
 

src/permission.js

@@ -1,21 +1,21 @@
 import router from './router'
 import store from './store'
-import NProgress from 'nprogress' // Progress 进度条
+import NProgress from 'nprogress' // progress bar
-import 'nprogress/nprogress.css'// Progress 进度条样式
+import 'nprogress/nprogress.css'// progress bar style
-import { getToken } from '@/utils/auth' // 验权
+import { getToken } from '@/utils/auth' // getToken from cookie
 import { Message } from 'element-ui'
 
 // permissiom judge
 function hasPermission(roles, permissionRoles) {
-  if (roles.indexOf('admin') >= 0) return true // admin权限 直接通过
+  if (roles.indexOf('admin') >= 0) return true // admin permission passed directly
   if (!permissionRoles) return true
   return roles.some(role => permissionRoles.indexOf(role) >= 0)
 }
 
-const whiteList = ['/login', '/authredirect']// 不重定向白名单
+const whiteList = ['/login', '/authredirect']// no redirect whitelist
 
 router.beforeEach((to, from, next) => {
-  NProgress.start() // 开启Progress
+  NProgress.start() // start progress bar
   if (getToken()) { // 判断是否有token
     if (to.path === '/login') {
       next({ path: '/' })
@@ -26,11 +26,11 @@ router.beforeEach((to, from, next) => {
           const roles = res.data.role
           store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,replace: true so the navigation will not leave a history record
+            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成 ,set the replace: true so the navigation will not leave a history record
           })
         }).catch(() => {
           store.dispatch('FedLogOut').then(() => {
-            Message.error('验证失败,请重新登录')
+            Message.error('Verification failed, please login again')
             next({ path: '/login' })
           })
         })
@@ -56,5 +56,5 @@ router.beforeEach((to, from, next) => {
 })
 
 router.afterEach(() => {
-  NProgress.done() // 结束Progress
+  NProgress.done() // finish progress bar
 })

src/utils/request.js

@@ -3,17 +3,17 @@ import { Message } from 'element-ui'
 import store from '@/store'
 import { getToken } from '@/utils/auth'
 
-// 创建axios实例
+// create an axios instance
 const service = axios.create({
   baseURL: process.env.BASE_API, // api的base_url
-  timeout: 5000 // 请求超时时间
+  timeout: 5000 // request timeout
 })
 
-// request拦截器
+// request interceptor
 service.interceptors.request.use(config => {
   // Do something before request is sent
   if (store.getters.token) {
-    config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
+    config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
   }
   return config
 }, error => {
@@ -22,7 +22,7 @@ service.interceptors.request.use(config => {
   Promise.reject(error)
 })
 
-// respone拦截器
+// respone interceptor
 service.interceptors.response.use(
   response => response,
   /**

src/views/clipboard/index.vue

@@ -2,11 +2,11 @@
   <div class="app-container">
     <el-tabs v-model="activeName">
       <el-tab-pane label="use clipboard  directly" name="directly">
-        <el-input v-model="inputData" placeholder="请输入内容" style='width:400px;'></el-input>
+        <el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
         <el-button type="primary" icon="document" @click='handleCopy(inputData,$event)'>copy</el-button>
       </el-tab-pane>
       <el-tab-pane label="use clipboard by v-directive" name="v-directive">
-        <el-input v-model="inputData" placeholder="请输入内容" style='width:400px;'></el-input>
+        <el-input v-model="inputData" placeholder="Please input" style='width:400px;'></el-input>
         <el-button type="primary" icon="document" v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
       </el-tab-pane>
     </el-tabs>

src/views/components-demo/dropzone.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="components-container">
     <code>
-      Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a> ,
+      Based on <a class="link-type" href="https://github.com/rowanwins/vue-dropzone"> dropzone </a>.
       {{$t('components.dropzoneTips')}}
     </code>
     <div class="editor-container">

src/views/components-demo/splitpane.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="components-container">
-    <code>splitPane If you've used
+    <code><strong>SplitPane</strong> If you've used
       <a href="http://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>

src/views/components-demo/tinymce.vue

@@ -5,7 +5,7 @@
       <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor"> {{$t('components.documentation')}}</a>
     </code>
     <div>
-      <tinymce :height="200" v-model="content"></tinymce>
+      <tinymce :height="300" v-model="content"></tinymce>
     </div>
     <div class="editor-content" v-html="content"></div>
   </div>

src/views/errorLog/index.vue

@@ -2,7 +2,7 @@
   <div class="errPage-container">
     <errorA></errorA>
     <errorB></errorB>
-    <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
+    <!-- $t is vue-i18n global function to translate lang -->
     <h3>{{$t('errorLog.tips')}}</h3>
     <code>
       {{$t('errorLog.description')}}

src/views/excel/exportExcel.vue

@@ -1,5 +1,5 @@
 <template>
- <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
+ <!-- $t is vue-i18n global function to translate lang -->
   <div class="app-container">
     <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.export')}} excel</el-button>

src/views/excel/selectExcel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
+    <!-- $t is vue-i18n global function to translate lang -->
     <el-input style='width:340px;' :placeholder="$t('excel.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('excel.selectedExport')}}</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"

src/views/layout/components/AppMain.vue

@@ -13,7 +13,6 @@ export default {
   name: 'AppMain',
   computed: {
     cachedViews() {
-      // console.log(this.$store.state.tagsView.cachedViews)
       return this.$store.state.tagsView.cachedViews
     }
     // key() {

src/views/layout/components/Navbar.vue

@@ -73,7 +73,7 @@ export default {
     },
     logout() {
       this.$store.dispatch('LogOut').then(() => {
-        location.reload()// 为了重新实例化vue-router对象 避免bug
+        location.reload()// In order to re-instantiate the vue-router object to avoid bugs
       })
     }
   }

src/views/login/index.vue

@@ -16,8 +16,7 @@
         <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
-        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
+        <el-input name="password" :type="passwordType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="password" />
-          placeholder="password" />
         <span class="show-pwd" @click="showPwd">
           <svg-icon icon-class="eye" />
         </span>
@@ -30,7 +29,7 @@
         <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
       </div>
       <div class="tips">
-        <span>{{$t('login.username')}} : editor </span>
+        <span style="margin-right:18px;">{{$t('login.username')}} : editor</span>
         <span>{{$t('login.password')}} : {{$t('login.any')}}</span>
       </div>
 
@@ -51,10 +50,10 @@
 <script>
 import { isvalidUsername } from '@/utils/validate'
 import LangSelect from '@/components/LangSelect'
-import socialSign from './socialsignin'
+import SocialSign from './socialsignin'
 
 export default {
-  components: { LangSelect, socialSign },
+  components: { LangSelect, SocialSign },
   name: 'login',
   data() {
     const validateUsername = (rule, value, callback) => {
@@ -80,17 +79,17 @@ export default {
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
         password: [{ required: true, trigger: 'blur', validator: validatePassword }]
       },
-      pwdType: 'password',
+      passwordType: 'password',
       loading: false,
       showDialog: false
     }
   },
   methods: {
     showPwd() {
-      if (this.pwdType === 'password') {
+      if (this.passwordType === 'password') {
-        this.pwdType = ''
+        this.passwordType = ''
       } else {
-        this.pwdType = 'password'
+        this.passwordType = 'password'
       }
     },
     handleLogin() {
@@ -100,7 +99,6 @@ export default {
           this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
             this.loading = false
             this.$router.push({ path: '/' })
-            // this.showDialog = true
           }).catch(() => {
             this.loading = false
           })
@@ -169,7 +167,6 @@ $light_gray:#eee;
     color: #454545;
   }
 }
-
 </style>
 
 <style rel="stylesheet/scss" lang="scss" scoped>

src/views/theme/index.vue

@@ -9,6 +9,7 @@
       <div class="box-item">
         <span class="field-label">{{$t('theme.change')}} : </span>
         <el-switch v-model="theme"></el-switch>
+        <code style="margin-top:15px;">{{$t('theme.tips')}}</code>
       </div>
     </el-card>
 

src/views/zip/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
+    <!-- $t is vue-i18n global function to translate lang -->
     <el-input style='width:300px;' :placeholder="$t('zip.placeholder')" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">{{$t('zip.export')}} zip</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>