增加毫末科技定制的页面和引入font-awesome

README.md

@@ -10,6 +10,14 @@
 
 接口使用 http://api.haomo-studio.com/org/swagger-ui.html
 
+毫末科技所有定制的模块，全部放到以下目录里：
+
+    src/views/haomo
+
+除了vue-element-admin，还引入了其他重要的模块：
+
+* [Vue-Awesome](https://github.com/Justineo/vue-awesome)
+
 ## 使用
 
 ### 安装

package.json

@@ -32,6 +32,7 @@
     "simplemde": "1.11.2",
     "sortablejs": "1.7.0",
     "vue": "2.5.10",
+    "vue-awesome": "^2.3.4",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-multiselect": "2.0.8",

src/main.js

@@ -19,6 +19,10 @@ import './mock' // simulation data
 
 import * as filters from './filters' // global filters
 
+import Icon from 'vue-awesome/components/Icon'
+
+Vue.component('icon', Icon)
+
 Vue.use(Element, {
   size: 'medium', // set element-ui default size
   i18n: (key, value) => i18n.t(key, value)

src/router/index.js

@@ -63,6 +63,86 @@ export default new Router({
 })
 
 export const asyncRouterMap = [
+  {
+    path: '/haomo',
+    component: Layout,
+    name: 'haomo',
+    meta: {
+      title: '毫末定制',
+      icon: 'component'
+    },
+    children: [
+      {
+        path: '/haomo/components',
+        component: _import('haomo/components/index'),
+        redirect: '/haomo/components/table',
+        name: 'haomo-components',
+        meta: {
+          title: '组件',
+          icon: 'component'
+        },
+        children: [
+          {
+            path: 'table',
+            component: _import('haomo/components/tables/index'),
+            name: 'haomo-table',
+            meta: {
+              title: '表格',
+              icon: 'table'
+            }
+          },
+          {
+            path: 'form',
+            component: _import('haomo/components/tables/index'),
+            name: 'haomo-form',
+            meta: {
+              title: '表单',
+              icon: 'form'
+            }
+          },
+          {
+            path: 'detail',
+            component: _import('haomo/components/details/index'),
+            name: 'haomo-detail',
+            meta: {
+              title: '详情',
+              icon: 'table'
+            }
+          }
+        ]
+      },
+      {
+        path: '/haomo/pages',
+        redirect: '/haomo/pages/login',
+        name: 'haomo-pages',
+        meta: {
+          title: '页面',
+          icon: 'fa fa-pagelines'
+        },
+        children: [
+          {
+            path: 'login',
+            component: _import('haomo/pages/login'),
+            name: 'haomo-login',
+            meta: {
+              title: '登录',
+              icon: 'password'
+            }
+          },
+          {
+            path: 'personal',
+            component: _import('haomo/pages/personal'),
+            name: 'haomo-personal',
+            meta: {
+              title: '个人中心',
+              icon: 'people'
+            }
+          }
+        ]
+      }
+    ]
+  },
+
   {
     path: '/permission',
     component: Layout,

src/styles/haomo.scss

+/*
+  全局的font awesome设置
+ */
+.el-menu .fa {
+  margin-right: 16px;
+  color: rgb(191, 203, 217)
+}
\ No newline at end of file

src/styles/index.scss

@@ -4,6 +4,7 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+@import './haomo.scss';
 
 body {
   height: 100%;

src/views/haomo/components/details/index.vue

+<template>
+  <transition name="fade" mode="out-in">
+    <keep-alive :include='cachedViews'>
+      <router-view></router-view>
+    </keep-alive>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: 'ComponentsMain',
+    computed: {
+      cachedViews() {
+        return this.$store.state.tagsView.cachedViews
+      }
+    }
+  }
+</script>

src/views/haomo/components/forms/index.vue

+<template>
+  <transition name="fade" mode="out-in">
+    <keep-alive :include='cachedViews'>
+      <router-view></router-view>
+    </keep-alive>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: 'ComponentsMain',
+    computed: {
+      cachedViews() {
+        return this.$store.state.tagsView.cachedViews
+      }
+    }
+  }
+</script>

src/views/haomo/components/index.vue

+<template>
+  <transition name="fade" mode="out-in">
+    <keep-alive :include='cachedViews'>
+      <router-view></router-view>
+    </keep-alive>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: 'ComponentsMain',
+    computed: {
+      cachedViews() {
+        return this.$store.state.tagsView.cachedViews
+      }
+    }
+  }
+</script>

src/views/layout/components/Sidebar/SidebarItem.vue

@@ -4,14 +4,22 @@
 
       <router-link v-if="item.children.length===1 && !item.children[0].children&&!item.alwaysShow" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
         <el-menu-item :index="item.path+'/'+item.children[0].path" :class="{'submenu-title-noDropdown':!isNest}">
-          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
+          <svg-icon v-if="item.children[0].meta && item.children[0].meta.icon && item.children[0].meta.icon.indexOf('fa-') < 0"
+                    :icon-class="item.children[0].meta.icon"></svg-icon>
+
+          <i v-if="item.children[0].meta && item.children[0].meta.icon && item.children[0].meta.icon.indexOf('fa-') >= 0"
+             :class="item.children[0].meta.icon"></i>
           <span v-if="item.children[0].meta&&item.children[0].meta.title">{{generateTitle(item.children[0].meta.title)}}</span>
         </el-menu-item>
       </router-link>
 
       <el-submenu v-else :index="item.name||item.path" :key="item.name">
         <template slot="title">
-          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
+          <svg-icon v-if="item.meta && item.meta.icon && item.meta.icon.indexOf('fa-') < 0"
+                    :icon-class="item.meta.icon"></svg-icon>
+
+          <i v-if="item.meta && item.meta.icon && item.meta.icon.indexOf('fa-') >= 0"
+             :class="item.meta.icon"></i>
           <span v-if="item.meta&&item.meta.title">{{generateTitle(item.meta.title)}}</span>
         </template>
 
@@ -20,7 +28,11 @@
 
           <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
             <el-menu-item :index="item.path+'/'+child.path">
-              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
+              <svg-icon v-if="child.meta && child.meta.icon && child.meta.icon.indexOf('fa-') < 0"
+                        :icon-class="child.meta.icon"></svg-icon>
+
+              <i v-if="child.meta && child.meta.icon && child.meta.icon.indexOf('fa-') >= 0"
+                 :class="child.meta.icon"></i>
               <span v-if="child.meta&&child.meta.title">{{generateTitle(child.meta.title)}}</span>
             </el-menu-item>
           </router-link>