Merge branch 'i18n' into deploy

README.md

@@ -30,9 +30,9 @@ English | [简体中文](./README.zh-CN.md) | [日本語](./README.ja.md) | [Spa
 
 ## Introduction
 
-[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It based on [vue](https://github.com/vuejs/vue) and use the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is a production-ready front-end solution for admin interfaces. It is based on [vue](https://github.com/vuejs/vue) and uses the UI Toolkit [element-ui](https://github.com/ElemeFE/element).
 
-It is a magical vue admin based on the newest development stack of vue, built-in i18n solution, typical templates for enterprise applications, lots of awesome features. It helps you build a large complex Single-Page Applications. I believe whatever your needs are, this project will help you.
+[vue-element-admin](https://panjiachen.github.io/vue-element-admin) is based on the newest development stack of vue and it has a built-in i18n solution, typical templates for enterprise applications, and lots of awesome features. It helps you build large and complex Single-Page Applications. I believe whatever your needs are, this project will help you.
 
 - [Preview](https://panjiachen.github.io/vue-element-admin)
 

plop-templates/store/index.hbs

@@ -0,0 +1,16 @@
+{{#if state}}
+const state = {}
+{{/if}}
+
+{{#if mutations}}
+const mutations = {}
+{{/if}}
+
+{{#if actions}}
+const actions = {}
+{{/if}}
+
+export default {
+  namespaced: true,
+  {{options}}
+}

plop-templates/store/prompt.js

@@ -0,0 +1,62 @@
+const { notEmpty } = require('../utils.js')
+
+module.exports = {
+  description: 'generate store',
+  prompts: [{
+    type: 'input',
+    name: 'name',
+    message: 'store name please',
+    validate: notEmpty('name')
+  },
+  {
+    type: 'checkbox',
+    name: 'blocks',
+    message: 'Blocks:',
+    choices: [{
+      name: 'state',
+      value: 'state',
+      checked: true
+    },
+    {
+      name: 'mutations',
+      value: 'mutations',
+      checked: true
+    },
+    {
+      name: 'actions',
+      value: 'actions',
+      checked: true
+    }
+    ],
+    validate(value) {
+      if (!value.includes('state') || !value.includes('mutations')) {
+        return 'store require at least state and mutations'
+      }
+      return true
+    }
+  }
+  ],
+  actions(data) {
+    const name = '{{name}}'
+    const { blocks } = data
+    const options = ['state', 'mutations']
+    const joinFlag = `,
+  `
+    if (blocks.length === 3) {
+      options.push('actions')
+    }
+
+    const actions = [{
+      type: 'add',
+      path: `src/store/modules/${name}.js`,
+      templateFile: 'plop-templates/store/index.hbs',
+      data: {
+        options: options.join(joinFlag),
+        state: blocks.includes('state'),
+        mutations: blocks.includes('mutations'),
+        actions: blocks.includes('actions')
+      }
+    }]
+    return actions
+  }
+}

plopfile.js

@@ -1,7 +1,9 @@
 const viewGenerator = require('./plop-templates/view/prompt')
 const componentGenerator = require('./plop-templates/component/prompt')
+const storeGenerator = require('./plop-templates/store/prompt.js')
 
 module.exports = function(plop) {
   plop.setGenerator('view', viewGenerator)
   plop.setGenerator('component', componentGenerator)
+  plop.setGenerator('store', storeGenerator)
 }

src/components/MarkdownEditor/index.vue

@@ -12,7 +12,7 @@ import Editor from 'tui-editor'
 import defaultOptions from './default-options'
 
 export default {
-  name: 'MarddownEditor',
+  name: 'MarkdownEditor',
   props: {
     value: {
       type: String,

src/components/Share/DropdownMenu.vue

@@ -44,6 +44,7 @@ $t: .1s;
   width: 250px;
   position: relative;
   z-index: 1;
+  height: auto!important;
   &-title {
     width: 100%;
     display: block;
@@ -65,10 +66,12 @@ $t: .1s;
     position: absolute;
     width: 100%;
     background: #e0e0e0;
+    color: #000;
     line-height: 60px;
     height: 60px;
     cursor: pointer;
-    font-size: 20px;
+    font-size: 18px;
+    overflow: hidden;
     opacity: 1;
     transition: transform 0.28s ease;
     &:hover {

src/styles/element-ui.scss

@@ -77,3 +77,8 @@
 .el-range-editor.el-input__inner {
   display: inline-flex !important;
 }
+
+// to fix el-date-picker css style
+.el-range-separator {
+  box-sizing: content-box;
+}

src/views/documentation/index.vue

@@ -1,26 +1,10 @@
 <template>
   <div class="app-container documentation-container">
-    <a
+    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/">Documentation</a>
-      class="document-btn"
+    <a class="document-btn" target="_blank" href="https://github.com/PanJiaChen/vue-element-admin/">Github Repository</a>
-      target="_blank"
+    <a class="document-btn" target="_blank" href="https://panjiachen.gitee.io/vue-element-admin-site/zh/">国内文档</a>
-      href="https://panjiachen.github.io/vue-element-admin-site/"
+    <dropdown-menu class="document-btn" :items="articleList" title="系列文章" />
-    >Documentation</a>
+    <a class="document-btn" target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/zh/job/">内推招聘</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="系列文章" />
-    <a
-      class="document-btn"
-      target="_blank"
-      href="https://panjiachen.github.io/vue-element-admin-site/zh/job/"
-    >内推招聘</a>
   </div>
 </template>
 
@@ -53,8 +37,10 @@ export default {
   margin: 50px;
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-evenly;
+
   .document-btn {
-    margin-left: 50px;
+    flex-shrink: 0;
     display: block;
     cursor: pointer;
     background: black;

src/views/excel/export-excel.vue

@@ -13,7 +13,7 @@
       </a>
     </div>
 
-    <el-table v-loading="listLoading" :data="list" element-loading-text="拼命加载中" border fit highlight-current-row>
+    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading..." border fit highlight-current-row>
       <el-table-column align="center" label="Id" width="95">
         <template slot-scope="scope">
           {{ scope.$index }}

src/views/icons/index.vue

@@ -6,6 +6,7 @@
     </aside>
     <el-tabs type="border-card">
       <el-tab-pane label="Icons">
+        <div class="grid">
           <div v-for="item of svgIcons" :key="item" @click="handleClipboard(generateIconCode(item),$event)">
             <el-tooltip placement="top">
               <div slot="content">
@@ -17,8 +18,10 @@
               </div>
             </el-tooltip>
           </div>
+        </div>
       </el-tab-pane>
       <el-tab-pane label="Element-UI Icons">
+        <div class="grid">
           <div v-for="item of elementIcons" :key="item" @click="handleClipboard(generateElementIconCode(item),$event)">
             <el-tooltip placement="top">
               <div slot="content">
@@ -30,6 +33,7 @@
               </div>
             </el-tooltip>
           </div>
+        </div>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -67,6 +71,12 @@ export default {
   margin: 10px 20px 0;
   overflow: hidden;
 
+  .grid {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
   .icon-item {
     margin: 20px;
     height: 85px;

src/views/table/complex-table.vue

@@ -36,13 +36,13 @@
       @sort-change="sortChange"
     >
       <el-table-column :label="$t('table.id')" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.id }}</span>
+          <span>{{ row.id }}</span>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.date')" width="150px" align="center">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.title')" min-width="150px">
@@ -52,18 +52,18 @@
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.author')" width="110px" align="center">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.author }}</span>
+          <span>{{ row.author }}</span>
         </template>
       </el-table-column>
       <el-table-column v-if="showReviewer" :label="$t('table.reviewer')" width="110px" align="center">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span style="color:red;">{{ scope.row.reviewer }}</span>
+          <span style="color:red;">{{ row.reviewer }}</span>
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.importance')" width="80px">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
+          <svg-icon v-for="n in +row.importance" :key="n" icon-class="star" class="meta-item__icon" />
         </template>
       </el-table-column>
       <el-table-column :label="$t('table.readings')" align="center" width="95">

src/views/table/drag-table.vue

@@ -3,38 +3,38 @@
     <!-- Note that row-key is necessary to get a correct row order. -->
     <el-table ref="dragTable" v-loading="listLoading" :data="list" row-key="id" border fit highlight-current-row style="width: 100%">
       <el-table-column align="center" label="ID" width="65">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.id }}</span>
+          <span>{{ row.id }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="Date">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
 
       <el-table-column min-width="300px" label="Title">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.title }}</span>
+          <span>{{ row.title }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="110px" align="center" label="Author">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.author }}</span>
+          <span>{{ row.author }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="100px" label="Importance">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="icon-star" />
+          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="icon-star" />
         </template>
       </el-table-column>
 
       <el-table-column align="center" label="Readings" width="95">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.pageviews }}</span>
+          <span>{{ row.pageviews }}</span>
         </template>
       </el-table-column>
 

src/views/table/inline-edit-table.vue

@@ -2,26 +2,26 @@
   <div class="app-container">
     <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
       <el-table-column align="center" label="ID" width="80">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.id }}</span>
+          <span>{{ row.id }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="180px" align="center" label="Date">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
+          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="120px" align="center" label="Author">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <span>{{ scope.row.author }}</span>
+          <span>{{ row.author }}</span>
         </template>
       </el-table-column>
 
       <el-table-column width="100px" label="Importance">
-        <template slot-scope="scope">
+        <template slot-scope="{row}">
-          <svg-icon v-for="n in +scope.row.importance" :key="n" icon-class="star" class="meta-item__icon" />
+          <svg-icon v-for="n in + row.importance" :key="n" icon-class="star" class="meta-item__icon" />
         </template>
       </el-table-column>