perf[i18n]: table && errorLog && theme

src/lang/en.js

@@ -69,6 +69,17 @@ export default {
     permissions: 'Your permissions',
     switchPermissions: 'Switch permissions'
   },
+  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'
+  },
+  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',
@@ -77,5 +88,9 @@ export default {
   zip: {
     export: 'Export',
     placeholder: 'Please enter the file name(default file)'
+  },
+  theme: {
+    change: 'Theme change',
+    documentation: 'Theme documentation'
   }
 }

src/lang/zh.js

@@ -69,6 +69,17 @@ export default {
     permissions: '你的权限',
     switchPermissions: '切换权限'
   },
+  table: {
+    dynamicTips1: '固定表头, 按照表头顺序排序',
+    dynamicTips2: '不固定表头, 按照点击顺序排序',
+    dragTips1: '默认顺序',
+    dragTips2: '拖拽后顺序'
+  },
+  errorLog: {
+    tips: '请点击右上角bug小图标',
+    description: '现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。',
+    documentation: '文档介绍'
+  },
   excel: {
     export: '导出',
     selectedExport: '导出已选择项',
@@ -77,5 +88,9 @@ export default {
   zip: {
     export: '导出',
     placeholder: '请输入文件名(默认file)'
+  },
+  theme: {
+    change: '换肤',
+    documentation: '换肤文档'
   }
 }

src/mock/article.js

@@ -10,7 +10,7 @@ for (let i = 0; i < count; i++) {
     timestamp: +Mock.Random.date('T'),
     author: '@first',
     auditor: '@name',
-    title: '@title(10, 20)',
+    title: '@title(5, 10)',
     forecast: '@float(0, 100, 2, 2)',
     importance: '@integer(1, 3)',
     'type|1': ['CN', 'US', 'JP', 'EU'],

src/styles/index.scss

@@ -102,7 +102,8 @@ code {
   margin-bottom: 20px;
   display: block;
   line-height: 36px;
-  font-size: 14px;
+  font-size: 15px;
+  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
   a {
     color: #337ab7;
     cursor: pointer;

src/views/errorLog/index.vue

@@ -2,11 +2,13 @@
   <div class="errPage-container">
     <errorA></errorA>
     <errorB></errorB>
-
-    <h3>请点击右上角bug小图表</h3>
+    <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
+    <h3>{{$t('errorLog.tips')}}</h3>
     <code>
-      现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常.
-      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">文档介绍</a>
+      {{$t('errorLog.description')}}
+      <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/error?id=%e4%bb%a3%e7%a0%81">
+        {{$t('errorLog.documentation')}}
+      </a>
     </code>
     <a href="#">
       <img src='https://wpimg.wallstcn.com/360e4842-4db5-42d0-b078-f9a84a825546.gif'>

src/views/example/tab/components/tabPane.vue

@@ -1,45 +1,45 @@
 <template>
-  <el-table :data="list"border fit highlight-current-row style="width: 100%">
+  <el-table :data="list" border fit highlight-current-row style="width: 100%">
 
-    <el-table-column align="center" label="序号" width="65"  v-loading="loading"
+    <el-table-column align="center" label="Id" width="65"  v-loading="loading"
     element-loading-text="请给我点时间！">
       <template slot-scope="scope">
         <span>{{scope.row.id}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column width="180px" align="center" label="时间">
+    <el-table-column width="180px" align="center" label="Date">
       <template slot-scope="scope">
         <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column min-width="300px" label="标题">
+    <el-table-column min-width="300px" label="Title">
       <template slot-scope="scope">
         <span>{{scope.row.title}}</span>
         <el-tag>{{scope.row.type}}</el-tag>
       </template>
     </el-table-column>
 
-    <el-table-column width="110px" align="center" label="作者">
+    <el-table-column width="110px" align="center" label="Author">
       <template slot-scope="scope">
         <span>{{scope.row.author}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column width="80px" label="重要性">
+    <el-table-column width="120px" label="Importance">
       <template slot-scope="scope">
         <svg-icon v-for="n in +scope.row.importance" icon-class="star" :key="n"></svg-icon>
       </template>
     </el-table-column>
 
-    <el-table-column align="center" label="阅读数" width="95">
+    <el-table-column align="center" label="Readings" width="95">
       <template slot-scope="scope">
         <span>{{scope.row.pageviews}}</span>
       </template>
     </el-table-column>
 
-    <el-table-column class-name="status-col" label="状态" width="110">
+    <el-table-column class-name="status-col" label="Status" width="110">
       <template slot-scope="scope">
         <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
       </template>

src/views/example/tab/index.vue

@@ -20,10 +20,10 @@ export default {
   data() {
     return {
       tabMapOptions: [
-        { label: '中国', key: 'CN' },
-        { label: '美国', key: 'US' },
-        { label: '日本', key: 'JP' },
-        { label: '欧元区', key: 'EU' }
+        { label: 'China', key: 'CN' },
+        { label: 'USA', key: 'US' },
+        { label: 'Japan', key: 'JP' },
+        { label: 'Eurozone', key: 'EU' }
       ],
       activeName: 'CN',
       createdTimes: 0

src/views/example/table/dragTable.vue

@@ -3,58 +3,58 @@
     <!-- Note that row-key is necessary to get a correct row order. -->
     <el-table :data="list" row-key="id"  v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
-      <el-table-column align="center" label="序号" width="65">
+      <el-table-column align="center" label="Id" width="65">
         <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="时间">
+      <el-table-column width="180px" align="center" label="Date">
         <template slot-scope="scope">
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="标题">
+      <el-table-column min-width="300px" label="Title">
         <template slot-scope="scope">
           <span>{{scope.row.title}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="110px" align="center" label="作者">
+      <el-table-column width="110px" align="center" label="Author">
         <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="重要性">
+      <el-table-column width="100px" label="Importance">
         <template slot-scope="scope">
           <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="icon-star" :key="n"></svg-icon>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="阅读数" width="95">
+      <el-table-column align="center" label="Readings" width="95">
         <template slot-scope="scope">
           <span>{{scope.row.pageviews}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="状态" width="110">
+      <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="拖拽" width="80">
+      <el-table-column align="center" label="Drag" width="80">
         <template slot-scope="scope">
           <svg-icon class='drag-handler' icon-class="drag"></svg-icon>
         </template>
       </el-table-column>
 
     </el-table>
-
-    <div class='show-d'>默认顺序 &nbsp; {{ oldList}}</div>
-    <div class='show-d'>拖拽后顺序{{newList}}</div>
+    <!-- $t is vue-i18n global function to translate lang (lang in @/lang)  -->
+    <div class='show-d'>{{$t('table.dragTips1')}} : &nbsp; {{ oldList}}</div>
+    <div class='show-d'>{{$t('table.dragTips2')}} : {{newList}}</div>
 
   </div>
 </template>

src/views/example/table/dynamicTable/fixedThead.vue

@@ -11,7 +11,7 @@
 
     <el-table :data="tableData" :key='key' border fit highlight-current-row style="width: 100%">
       <el-table-column prop="name" label="fruitName" width="180"></el-table-column>
-      <el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
+      <el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
         <template slot-scope="scope">
           {{scope.row[fruit]}}
         </template>
@@ -22,7 +22,7 @@
 </template>
 
 <script>
-const defaultFormThead = ['apple', 'banana'] // 默认选中项
+const defaultFormThead = ['apple', 'banana']
 
 export default {
   data() {
@@ -42,15 +42,15 @@ export default {
         }
       ],
       key: 1, // table key
-      formTheadOptions: ['apple', 'banana', 'orange'], // 可选择表头
+      formTheadOptions: ['apple', 'banana', 'orange'],
       checkboxVal: defaultFormThead, // checkboxVal
-      formThead: defaultFormThead // 默认表头
+      formThead: defaultFormThead // 默认表头 Default header
     }
   },
   watch: {
     checkboxVal(valArr) {
       this.formThead = this.formTheadOptions.filter(i => valArr.indexOf(i) >= 0)
-      this.key = this.key + 1// 为了保证table 每次都会重渲 （牺牲性能保证效果，当然也可以不用）
+      this.key = this.key + 1// 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
     }
   }
 }

src/views/example/table/dynamicTable/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="app-container">
-    <div style='margin:0 0 5px 20px'>固定表头 按照表头顺序排序</div>
+    <div style='margin:0 0 5px 20px'>{{$t('table.dynamicTips1')}}</div>
     <fixed-thead></fixed-thead>
 
-    <div style='margin:30px 0 5px 20px'>不固定表头 按照点击顺序排序</div>
+    <div style='margin:30px 0 5px 20px'>{{$t('table.dynamicTips2')}}</div>
     <unfixed-thead></unfixed-thead>
   </div>
 </template>

src/views/example/table/dynamicTable/unfixedThead.vue

@@ -12,7 +12,7 @@
     <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
       <el-table-column prop="name" label="fruitName" width="180">
       </el-table-column>
-      <el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
+      <el-table-column :key='fruit' v-for='fruit in formThead' :label="fruit">
         <template slot-scope="scope">
           {{scope.row[fruit]}}
         </template>

src/views/example/table/inlineEditTable.vue

@@ -3,37 +3,37 @@
 
     <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
 
-      <el-table-column align="center" label="序号" width="80">
+      <el-table-column align="center" label="Id" width="80">
         <template slot-scope="scope">
           <span>{{scope.row.id}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="180px" align="center" label="时间">
+      <el-table-column width="180px" align="center" label="Date">
         <template slot-scope="scope">
           <span>{{scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="120px" align="center" label="作者">
+      <el-table-column width="120px" align="center" label="Author">
         <template slot-scope="scope">
           <span>{{scope.row.author}}</span>
         </template>
       </el-table-column>
 
-      <el-table-column width="100px" label="重要性">
+      <el-table-column width="100px" label="Importance">
         <template slot-scope="scope">
           <svg-icon v-for="n in +scope.row.importance" icon-class="star" class="meta-item__icon" :key="n"></svg-icon>
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="状态" width="110">
+      <el-table-column class-name="status-col" label="Status" width="110">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="标题">
+      <el-table-column min-width="300px" label="Title">
         <template slot-scope="scope">
           <template v-if="scope.row.edit">
             <el-input class="edit-input" size="small" v-model="scope.row.title"></el-input>
@@ -43,10 +43,10 @@
         </template>
       </el-table-column>
 
-      <el-table-column align="center" label="编辑" width="120">
+      <el-table-column align="center" label="Operating" width="120">
         <template slot-scope="scope">
-          <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">完成</el-button>
-          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">编辑</el-button>
+          <el-button v-if="scope.row.edit" type="success" @click="confirmEdit(scope.row)" size="small" icon="el-icon-circle-check-outline">Ok</el-button>
+          <el-button v-else type="primary" @click='scope.row.edit=!scope.row.edit' size="small" icon="el-icon-edit">Edit</el-button>
         </template>
       </el-table-column>
 
@@ -89,7 +89,9 @@ export default {
         const items = response.data.items
         this.list = items.map(v => {
           this.$set(v, 'edit', false) // https://vuejs.org/v2/guide/reactivity.html
+
           v.originalTitle = v.title //  will be used when user click the cancel botton
+
           return v
         })
         this.listLoading = false

src/views/theme/index.vue

@@ -2,21 +2,22 @@
   <div class="app-container">
     <el-card class="box-card">
       <div slot="header">
-        <span style="line-height: 36px;">偏好设置</span>
-        <a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/#/theme'>换肤文档</a>
+        <a class='link-type link-title' target="_blank" href='https://panjiachen.github.io/vue-element-admin-site/#/theme'>
+        {{$t('theme.documentation')}}
+        </a>
       </div>
       <div class="box-item">
-        <span class="field-label">换肤:</span>
+        <span class="field-label">{{$t('theme.change')}} : </span>
         <el-switch v-model="theme"></el-switch>
       </div>
     </el-card>
 
     <div class="block">
-        <el-button type="primary">成功按钮</el-button>
-        <el-button type="success">成功按钮</el-button>
-        <el-button type="warning">警告按钮</el-button>
-        <el-button type="danger">危险按钮</el-button>
-        <el-button type="info">信息按钮</el-button>
+      <el-button type="primary">Primary</el-button>
+      <el-button type="success">Success</el-button>
+      <el-button type="info">Info</el-button>
+      <el-button type="warning">Warning</el-button>
+      <el-button type="danger">Danger</el-button>
     </div>
 
     <div class="block">
@@ -24,7 +25,8 @@
       <el-button type="primary" icon="el-icon-share"></el-button>
       <el-button type="primary" icon="el-icon-delete"></el-button>
       <el-button type="primary" icon="el-icon-search">Search</el-button>
-      <el-button type="primary">Upload
+      <el-button type="primary">
+        Upload
         <i class="el-icon-upload el-icon-right"></i>
       </el-button>
     </div>
@@ -52,7 +54,7 @@
 
 <script>
 import { toggleClass } from '@/utils'
-import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
+import '@/assets/custom-theme/index.css' // the theme changed version element-ui css
 
 export default {
   name: 'theme',
@@ -79,6 +81,9 @@ export default {
 </script>
 
 <style scoped>
+.field-label{
+  vertical-align: middle;
+}
 .box-card {
   width: 400px;
   margin: 20px auto;