20190808手动同步pro更新内容

.env

@@ -1,2 +1,3 @@
 NODE_ENV=production
 VUE_APP_PREVIEW=false
+VUE_APP_API_BASE_URL=/api

.env.preview

@@ -0,0 +1,3 @@
+NODE_ENV=production
+VUE_APP_PREVIEW=true
+VUE_APP_API_BASE_URL=/api

config/plugin.config.js

@@ -0,0 +1,42 @@
+const ThemeColorReplacer = require('webpack-theme-color-replacer')
+const generate = require('@ant-design/colors/lib/generate').default
+
+const getAntdSerials = (color) => {
+  // 淡化（即less的tint）
+  const lightens = new Array(9).fill().map((t, i) => {
+    return ThemeColorReplacer.varyColor.lighten(color, i / 10)
+  })
+  const colorPalettes = generate(color)
+  return lightens.concat(colorPalettes)
+}
+
+const themePluginOption = {
+  fileName: 'css/theme-colors-[contenthash:8].css',
+  matchColors: getAntdSerials('#1890ff'), // 主色系列
+  // 改变样式选择器，解决样式覆盖问题
+  changeSelector (selector) {
+    switch (selector) {
+      case '.ant-calendar-today .ant-calendar-date':
+        return ':not(.ant-calendar-selected-date):not(.ant-calendar-selected-day)' + selector
+      case '.ant-btn:focus,.ant-btn:hover':
+        return '.ant-btn:focus:not(.ant-btn-primary),.ant-btn:hover:not(.ant-btn-primary)'
+      case '.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon':
+        return ':not(.ant-steps-item-process)' + selector
+      case '.ant-btn.active,.ant-btn:active':
+        return '.ant-btn.active:not(.ant-btn-primary),.ant-btn:active:not(.ant-btn-primary)'
+      case '.ant-menu-horizontal>.ant-menu-item-active,.ant-menu-horizontal>.ant-menu-item-open,.ant-menu-horizontal>.ant-menu-item-selected,.ant-menu-horizontal>.ant-menu-item:hover,.ant-menu-horizontal>.ant-menu-submenu-active,.ant-menu-horizontal>.ant-menu-submenu-open,.ant-menu-horizontal>.ant-menu-submenu-selected,.ant-menu-horizontal>.ant-menu-submenu:hover':
+      case '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal > .ant-menu-submenu-selected,.ant-menu-horizontal > .ant-menu-submenu:hover':
+        return '.ant-menu-horizontal > .ant-menu-item-active,.ant-menu-horizontal > .ant-menu-item-open,.ant-menu-horizontal > .ant-menu-item-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,.ant-menu-horizontal > .ant-menu-submenu-active,.ant-menu-horizontal > .ant-menu-submenu-open,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected,.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover'
+      case '.ant-menu-horizontal > .ant-menu-item-selected > a':
+        return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item-selected > a'
+      case '.ant-menu-horizontal > .ant-menu-item > a:hover':
+        return '.ant-menu-horizontal:not(ant-menu-light):not(.ant-menu-dark) > .ant-menu-item > a:hover'
+      default :
+        return selector
+    }
+  }
+}
+
+const createThemeColorReplacerPlugin = () => new ThemeColorReplacer(themePluginOption)
+
+module.exports = createThemeColorReplacerPlugin

src/components/GlobalHeader/GlobalHeader.vue

@@ -72,7 +72,7 @@ export default {
     }
   },
   mounted () {
-    document.body.addEventListener('scroll', this.handleScroll, { passive: true })
+    document.addEventListener('scroll', this.handleScroll, { passive: true })
   },
   methods: {
     handleScroll () {
@@ -107,9 +107,10 @@ export default {
 </script>
 
 <style lang="less">
+@import '../index.less';
 .header-animat{
   position: relative;
-  z-index: 2;
+  z-index: @ant-global-header-zindex;
 }
 .showHeader-enter-active {
   transition: all 0.25s ease;

src/components/IconSelector/IconSelector.vue

@@ -1,10 +1,10 @@
 <template>
-  <div>
-    <a-tabs>
-      <a-tab-pane v-for="(v, i) in icons" :tab="v.title" :key="i">
+  <div :class="prefixCls">
+    <a-tabs v-model="currentTab" @change="handleTabChange">
+      <a-tab-pane v-for="v in icons" :tab="v.title" :key="v.key">
         <ul>
-          <li v-for="(icon, key) in v.icons" :key="`${v.title}-${key}`" :class="{ 'active': selectedIcon==icon }">
-            <a-icon :type="icon" :style="{ fontSize: '36px' }" @click="handleSelectedIcon(icon)" />
+          <li v-for="(icon, key) in v.icons" :key="`${v.key}-${key}`" :class="{ 'active': selectedIcon==icon }" @click="handleSelectedIcon(icon)" >
+            <a-icon :type="icon" :style="{ fontSize: '36px' }" />
           </li>
         </ul>
       </a-tab-pane>
@@ -17,36 +17,69 @@ import icons from './icons'
 
 export default {
   name: 'IconSelect',
+  props: {
+    prefixCls: {
+      type: String,
+      default: 'ant-pro-icon-selector'
+    },
+    // eslint-disable-next-line
+    value: {
+      type: String
+    }
+  },
   data () {
     return {
-      selectedIcon: '',
+      selectedIcon: this.value || '',
+      currentTab: 'directional',
       icons
     }
   },
+  watch: {
+    value (val) {
+      this.selectedIcon = val
+      this.autoSwitchTab()
+    }
+  },
+  created () {
+    if (this.value) {
+      this.autoSwitchTab()
+    }
+  },
   methods: {
     handleSelectedIcon (icon) {
       this.selectedIcon = icon
       this.$emit('change', icon)
+    },
+    handleTabChange (activeKey) {
+      this.currentTab = activeKey
+    },
+    autoSwitchTab () {
+      icons.some(item => item.icons.some(icon => icon === this.value) && (this.currentTab = item.key))
     }
   }
 }
 </script>
 
 <style lang="less" scoped>
+  @import "../index.less";
+
   ul{
     list-style: none;
     padding: 0;
     overflow-y: scroll;
     height: 250px;
+
     li{
       display: inline-block;
-      padding:5px;
-      margin:5px;
-      &:hover {
+      padding: @padding-sm;
+      margin: 3px 0;
+      border-radius: @border-radius-base;
+
+      &:hover, &.active{
+        // box-shadow: 0px 0px 5px 2px @primary-color;
         cursor: pointer;
-      }
-      &.active{
-        box-shadow: 0px 0px 5px 2px #888888;
+        color: @white;
+        background-color: @primary-color;
       }
     }
   }

src/components/index.less

@@ -1,4 +1,5 @@
 @import "~ant-design-vue/lib/style/index";
 
 // The prefix to use on all css classes from ant-pro.
-@ant-pro-prefix             : ant-pro;
+@ant-pro-prefix             : ant-pro;
+@ant-global-header-zindex   : 105;

src/core/bootstrap.js

@@ -16,6 +16,8 @@ import {
 import config from '@/config/defaultSettings'
 
 export default function Initializer () {
+  console.log(`API_URL: ${process.env.VUE_APP_API_BASE_URL}`)
+
   store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
   store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
   store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))

src/layouts/RouteView.vue

@@ -23,7 +23,7 @@ export default {
     // 这里增加了 multiTab 的判断，当开启了 multiTab 时
     // 应当全部组件皆缓存，否则会导致切换页面后页面还原成原始状态
     // 若确实不需要，可改为 return meta.keepAlive ? inKeep : notKeep
-    if (!getters.multiTab && meta.keepAlive === false) {
+    if (!getters.multiTab && !!meta.keepAlive) {
       return notKeep
     }
     return this.keepAlive || getters.multiTab || meta.keepAlive ? inKeep : notKeep

src/main.js

@@ -24,8 +24,6 @@ Vue.use(VueAxios)
 new Vue({
   router,
   store,
-  created () {
-    bootstrap()
-  },
+  created: bootstrap,
   render: h => h(App)
 }).$mount('#app')

src/router/README.md

@@ -52,7 +52,7 @@
 | title               | 路由标题, 用于显示面包屑, 页面标题 *推荐设置                 | string  | -      |
 | icon                | 路由在 menu 上显示的图标                                     | [string,svg]  | -      |
 | keepAlive           | 缓存该路由                                                   | boolean | false  |
-| hidden              | 配合`alwaysShow`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false  |
+| hidden              | 配合`hideChildrenInMenu`使用，用于隐藏菜单时，提供递归到父菜单显示 选中菜单项_（可参考 个人页 配置方式）_ | boolean | false  |
 | hiddenHeaderContent | *特殊 隐藏 [PageHeader](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/layout/PageHeader.vue#L14) 组件中的页面带的 面包屑和页面标题栏 | boolean | false  |
 | permission          | 与项目提供的权限拦截匹配的权限，如果不匹配，则会被禁止访问该路由页面 | array   | []     |
 
@@ -72,7 +72,7 @@ const asyncRouterMap = [
     children: [
       {
         path: '/dashboard',
-        component: Layout,
+        component: RouteView,
         name: 'dashboard',
         redirect: '/dashboard/workplace',
         meta: {title: '仪表盘', icon: 'dashboard', permission: ['dashboard']},
@@ -131,10 +131,15 @@ const asyncRouterMap = [
 
 > 1. 请注意 `component: () => import('..') ` 方式引入路由的页面组件为 懒加载模式。具体可以看 [Vue 官方文档](https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)
 > 2. 增加新的路由应该增加在 '/' (index) 路由的 `children` 内
-> 3. `permission` 可以进行自定义修改，只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10)
+> 3. 子路由的父级路由必须有 `router-view` 才能让子路由渲染出来，请仔细查阅 vue-router 文档
+> 4. `permission` 可以进行自定义修改，只需要对这个模块进行自定义修改即可 [src/store/modules/permission.js#L10](https://github.com/sendya/ant-design-pro-vue/blob/master/src/store/modules/permission.js#L10)
 
 
 
 附权限路由结构：
 
-![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
+![权限结构](https://static-2.loacg.com/open/static/github/permissions.png)
+
+
+
+第二种前端路由由后端动态生成的设计，可以前往官网文档 https://pro.loacg.com/docs/authority-management 参考

src/utils/request.js

@@ -5,7 +5,7 @@ import { VueAxios } from './axios'
 import { Notification as notification } from 'ant-design-vue'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 
-const baseURL = '/api'
+const baseURL = process.env.VUE_APP_API_BASE_URL
 // 创建 axios 实例
 const service = axios.create({
   baseURL: baseURL, // api base_url

src/views/dashboard/Workplace.vue

@@ -190,11 +190,9 @@ export default {
     this.avatar = this.userInfo.avatar
 
     getRoleList().then(res => {
-      console.log('workplace -> call getRoleList()', res)
     })
 
     getServiceList().then(res => {
-      console.log('workplace -> call getServiceList()', res)
     })
   },
   mounted () {