reactor:refine code&&demo

src/components/ThemePicker/index.vue

@@ -54,7 +54,6 @@ export default {
         })
       styles.forEach(style => {
         const { innerText } = style
-        console.log(style)
         if (typeof innerText !== 'string') return
         style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
       })

src/icons/svg/dashboard.svg

+<?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="1509611822979" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10379" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M219.428571 658.285714q0-30.285714-21.428571-51.714285T146.285714 585.142857t-51.714285 21.428572T73.142857 658.285714t21.428572 51.714286T146.285714 731.428571t51.714286-21.428571T219.428571 658.285714z m109.714286-256q0-30.285714-21.428571-51.714285T256 329.142857t-51.714286 21.428572T182.857143 402.285714t21.428571 51.714286T256 475.428571t51.714286-21.428571T329.142857 402.285714z m244.571429 274.857143l57.714285-218.285714q3.428571-14.857143-4.285714-27.714286T605.142857 414.285714t-27.428571 3.714286-17.142857 22.571429l-57.714286 218.285714q-34.285714 2.857143-61.142857 24.857143t-36 56.285714q-11.428571 44 11.428571 83.428571t66.857143 50.857143 83.428571-11.428571 50.857143-66.857143q9.142857-34.285714-3.428571-66.857143t-41.142857-52z m377.142857-18.857143q0-30.285714-21.428572-51.714285T877.714286 585.142857t-51.714286 21.428572-21.428571 51.714285 21.428571 51.714286 51.714286 21.428571 51.714285-21.428571 21.428572-51.714286z m-365.714286-365.714285q0-30.285714-21.428571-51.714286T512 219.428571t-51.714286 21.428572T438.857143 292.571429t21.428571 51.714285T512 365.714286t51.714286-21.428572T585.142857 292.571429z m256 109.714285q0-30.285714-21.428571-51.714285T768 329.142857t-51.714286 21.428572T694.857143 402.285714t21.428571 51.714286T768 475.428571t51.714286-21.428571T841.142857 402.285714z m182.857143 256q0 149.142857-80.571429 276-10.857143 16.571429-30.857142 16.571429H111.428571q-20 0-30.857142-16.571429Q0 808 0 658.285714q0-104 40.571429-198.857143t109.142857-163.428571 163.428571-109.142857 198.857143-40.571429 198.857143 40.571429 163.428571 109.142857 109.142857 163.428571 40.571429 198.857143z" p-id="10380"></path></svg>
\ No newline at end of file

src/router/index.js

@@ -26,15 +26,14 @@ export const constantRouterMap = [
   { path: '/401', component: _import('errorPage/401'), hidden: true },
 
   {
-    path: '/',
+    path: '',
     component: Layout,
-    redirect: '/dashboard',
-    hidden: true,
+    redirect: 'dashboard',
     children: [{
       path: 'dashboard',
       component: _import('dashboard/index'),
       name: 'dashboard',
-      meta: { title: '首页' }
+      meta: { title: '首页', icon: 'dashboard' }
     }]
   },
 

src/styles/element-ui.scss

@@ -12,7 +12,7 @@
 
  .cell {
    .el-tag {
-     margin-right: 8px;
+     margin-right: 0px;
    }
  }
 

src/styles/sidebar.scss

-// 主体区域
-.main-container {
+.app-wrapper {
+  // 主体区域
+  .main-container {
     min-height: 100%;
     transition: margin-left 0.28s;
     margin-left: 180px;
-}
-
-// 侧边栏
-.hideSidebar {
+  }
+  // 侧边栏
+  .hideSidebar {
     .sidebar-container {
       width: 36px!important;
       overflow: inherit;
@@ -14,9 +14,8 @@
     .main-container {
       margin-left: 36px;
     }
-}
-
-.sidebar-container {
+  }
+  .sidebar-container {
     transition: width 0.28s;
     width: 180px!important;
     height: 100%;
@@ -29,32 +28,27 @@
     &::-webkit-scrollbar {
       display: none
     }
-}
-
-.sidebar-container>.el-menu {
+  }
+  .sidebar-container>.el-menu {
     width: 100%!important;
     min-height: 100%;
-}
-
-.sidebar-container .svg-icon {
+  }
+  .sidebar-container .svg-icon {
     margin-right: 16px;
-}
-
-.hideSidebar .el-submenu>.el-submenu__title,
-.hideSidebar .submenu-title-noDropdown {
+  }
+  .hideSidebar .el-submenu>.el-submenu__title,
+  .hideSidebar .submenu-title-noDropdown {
     padding-left: 10px!important;
-}
-
-.hideSidebar .submenu-title-noDropdown span,
-.hideSidebar .el-submenu>.el-submenu__title>span {
+  }
+  .hideSidebar .submenu-title-noDropdown span,
+  .hideSidebar .el-submenu>.el-submenu__title>span {
     height: 0;
     width: 0;
     overflow: hidden;
     visibility: hidden;
     display: inline-block;
-}
-
-.hideSidebar .nest-menu .el-submenu__title {
+  }
+  .hideSidebar .nest-menu .el-submenu__title {
     text-align: initial!important;
     padding-left: 20px!important;
     span {
@@ -66,20 +60,17 @@
     .el-submenu__icon-arrow {
       display: block!important;
     }
-}
-
-.hideSidebar .menu-wrapper>.el-menu-item,
-.hideSidebar .submenu-title-noDropdown,
-.hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
+  }
+  .hideSidebar .menu-wrapper>.el-menu-item,
+  .hideSidebar .submenu-title-noDropdown,
+  .hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
     text-align: center;
-}
-
-.hideSidebar .el-menu-item .el-submenu__icon-arrow,
-.hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
+  }
+  .hideSidebar .el-menu-item .el-submenu__icon-arrow,
+  .hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
     display: none;
-}
-
-.hideSidebar .submenu-title-noDropdown {
+  }
+  .hideSidebar .submenu-title-noDropdown {
     position: relative;
     span {
       transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
@@ -102,12 +93,12 @@
         opacity: 1;
       }
     }
-}
-
-.el-submenu .el-menu-item {
+  }
+  .el-submenu .el-menu-item {
     min-width: 180px!important;
     background-color: #2B2C2D!important;
     &:hover {
       background-color: rgb(67, 74, 80)!important;
     }
+  }
 }

src/vendor/Export2Excel.js

@@ -155,6 +155,6 @@ export function export_json_to_excel(th, jsonData, defaultTitle) {
     wb.Sheets[ws_name] = ws;
 
     var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
-    var title = defaultTitle || '列表'
+    var title = defaultTitle || 'excel-list'
     saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
 }

src/vendor/Export2Zip.js

@@ -4,8 +4,8 @@ import JSZip from 'jszip'
 
 export function export_txt_to_zip(th, jsonData, txtName, zipName) {
   const zip = new JSZip()
-  const txt_name = txtName || '文本'
-  const zip_name = zipName || '压缩包'
+  const txt_name = txtName || 'file'
+  const zip_name = zipName || 'file'
   const data = jsonData
   let txtData = `${th}\r\n`
   data.forEach((row) => {

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

 <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"
     element-loading-text="请给我点时间！">
@@ -39,7 +39,7 @@
       </template>
     </el-table-column>
 
-    <el-table-column class-name="status-col" label="状态" width="90">
+    <el-table-column class-name="status-col" label="状态" width="110">
       <template slot-scope="scope">
         <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
       </template>

src/views/example/table/complexTable.vue

@@ -19,10 +19,10 @@
         </el-option>
       </el-select>
 
-      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
-      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
-      <el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button>
-      <el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
+      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
+      <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加</el-button>
+      <el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
+      <el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
     </div>
 
     <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
@@ -39,7 +39,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column min-width="300px" label="标题">
+      <el-table-column min-width="150px" label="标题">
         <template slot-scope="scope">
           <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
           <el-tag>{{scope.row.type | typeFilter}}</el-tag>
@@ -70,7 +70,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="状态" width="90">
+      <el-table-column class-name="status-col" label="状态" width="100">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>
@@ -121,7 +121,7 @@
         </el-form-item>
 
         <el-form-item label="重要性">
-          <el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate>
+          <el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
         </el-form-item>
 
         <el-form-item label="点评">

src/views/example/table/dragTable.vue

@@ -39,7 +39,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="状态" width="90">
+      <el-table-column class-name="status-col" label="状态" width="110">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>

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

@@ -9,7 +9,7 @@
       </el-checkbox-group>
     </div>
 
-    <el-table :data="tableData" :key='key' style="width: 100%">
+    <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">
         <template slot-scope="scope">

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

@@ -9,7 +9,7 @@
       </el-checkbox-group>
     </div>
 
-    <el-table :data="tableData" style="width: 100%">
+    <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">

src/views/example/table/inlineEditTable.vue

@@ -27,7 +27,7 @@
         </template>
       </el-table-column>
 
-      <el-table-column class-name="status-col" label="状态" width="100">
+      <el-table-column class-name="status-col" label="状态" width="110">
         <template slot-scope="scope">
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
         </template>

src/views/excel/exportExcel.vue

 <template>
   <div class="app-container">
+    <el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label='ID' width="95">
@@ -42,7 +43,8 @@ export default {
     return {
       list: null,
       listLoading: true,
-      downloadLoading: false
+      downloadLoading: false,
+      filename: ''
     }
   },
   created() {
@@ -64,7 +66,7 @@ export default {
         const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
         const list = this.list
         const data = this.formatJson(filterVal, list)
-        export_json_to_excel(tHeader, data, '列表excel')
+        export_json_to_excel(tHeader, data, this.filename)
         this.downloadLoading = false
       })
     },

src/views/excel/selectExcel.vue

 <template>
   <div class="app-container">
+    <el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
       ref="multipleTable">
@@ -44,7 +45,8 @@ export default {
       list: null,
       listLoading: true,
       multipleSelection: [],
-      downloadLoading: false
+      downloadLoading: false,
+      filename: ''
     }
   },
   created() {
@@ -70,7 +72,7 @@ export default {
           const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
           const list = this.multipleSelection
           const data = this.formatJson(filterVal, list)
-          export_json_to_excel(tHeader, data, '列表excel')
+          export_json_to_excel(tHeader, data, this.filename)
           this.$refs.multipleTable.clearSelection()
           this.downloadLoading = false
         })

src/views/layout/components/Levelbar.vue

@@ -25,7 +25,7 @@ export default {
         return
       }
       const first = matched[0]
-      if (first && (first.name !== '首页' || first.path !== '')) {
+      if (first && first.name !== 'dashboard') {
         matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
       }
       this.levelList = matched

src/views/svg-icons/index.vue

 <template>
   <div class="icons-container">
     <div class="icons-wrapper">
-      <div v-for='item of iconsMap' :key='item' class='icon-item' @click='handleClipboard(generateIconCode(item),$event)'>
-        <el-tooltip placement="top" effect="light">
+      <div v-for='item of iconsMap' :key='item' @click='handleClipboard(generateIconCode(item),$event)'>
+        <el-tooltip placement="top">
           <div slot="content">
             {{generateIconCode(item)}}
           </div>
+          <div class='icon-item'>
             <svg-icon :icon-class="item" />
-        </el-tooltip>
             <span>{{item}}</span>
           </div>
+        </el-tooltip>
+      </div>
     </div>
   </div>
 </template>
 
+
 <script>
 import icons from './generateIconsView'
 import clipboard from '@/utils/clipboard' // use clipboard directly
@@ -50,12 +53,12 @@ export default {
   }
   .icon-item {
     margin: 20px;
-    height: 137px;
+    height: 110px;
     text-align: center;
-    width: 120px;
+    width: 110px;
     float: left;
-    font-size: 40px;
-    color: #666;
+    font-size: 30px;
+    color: #24292e;
     cursor: pointer;
   }
   span {

src/views/zip/index.vue

 <template>
   <div class="app-container">
+    <el-input style='width:240px;' placeholder="请输入文件名(默认file)" prefix-icon="el-icon-document" v-model="filename"></el-input>
     <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出zip</el-button>
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
       <el-table-column align="center" label='ID' width="95">
@@ -41,7 +42,8 @@ export default {
     return {
       list: null,
       listLoading: true,
-      downloadLoading: false
+      downloadLoading: false,
+      filename: ''
     }
   },
   created() {
@@ -63,7 +65,7 @@ export default {
         const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
         const list = this.list
         const data = this.formatJson(filterVal, list)
-        export_txt_to_zip(tHeader, data, '列表文本', '压缩文本')
+        export_txt_to_zip(tHeader, data, this.filename, this.filename)
         this.downloadLoading = false
       })
     },