haiwei-ui 1.0.0

package/packages/skins/pretty/styles/themes/green-light/_index.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+&.theme-green-light {
+    @import '../theme';
+}

package/packages/skins/pretty/styles/themes/green-light/_variables.scss

@@ -0,0 +1,38 @@
+/*主题色*/
+$pretty-theme-color: rgb(0, 166, 90);
+$pretty-theme-color-transpart: #ccedde;
+/*header*/
+$pretty-header-background-color: $pretty-theme-color;
+$pretty-header-color: #fff;
+
+/*面包屑*/
+$pretty-breadcrumb-color: #e4e7ed;
+$pretty-breadcrumb-separator-color: #dcdfe6;
+$pretty-breadcrumb-link-color: #fff;
+
+/*main*/
+$pretty-main-background-color: #f0f0f0;
+
+/*sidebar*/
+$pretty-sidebar-background-color: #f9fafc;
+
+/*logo*/
+$pretty-logo-box-background-color: $pretty-theme-color;
+$pretty-logo-text-color: #fff;
+
+/*menus*/
+$pretty-menus-background-color: #fff;
+$pretty-menus-menu-color: #444;
+
+$pretty-menus-menu-active-background-color: $pretty-theme-color-transpart;
+$pretty-menus-menu-active-color: $pretty-theme-color;
+
+$pretty-menus-menu-hover-background-color: $pretty-theme-color-transpart;
+$pretty-menus-menu-hover-color: $pretty-theme-color;
+
+/*树*/
+$pretty-tree-color: #fff;
+$pretty-tree-background-color: $pretty-theme-color;
+
+/*对话框*/
+$pretty-dialog-icon-color: #fff;

package/packages/skins/pretty/styles/themes/orange/_index.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+&.theme-orange {
+  @import '../theme';
+}

package/packages/skins/pretty/styles/themes/orange/_variables.scss

@@ -0,0 +1,38 @@
+/*主题色*/
+$pretty-theme-color: #e6a23c;
+$pretty-theme-color-transpart: #faecd8;
+/*header*/
+$pretty-header-background-color: $pretty-theme-color;
+$pretty-header-color: #fff;
+
+/*面包屑*/
+$pretty-breadcrumb-color: #e4e7ed;
+$pretty-breadcrumb-separator-color: #dcdfe6;
+$pretty-breadcrumb-link-color: #fff;
+
+/*main*/
+$pretty-main-background-color: #f0f0f0;
+
+/*sidebar*/
+$pretty-sidebar-background-color: #222d32;
+
+/*logo*/
+$pretty-logo-box-background-color: $pretty-theme-color;
+$pretty-logo-text-color: #fff;
+
+/*menus*/
+$pretty-menus-background-color: $pretty-sidebar-background-color;
+$pretty-menus-menu-color: rgba(255, 255, 255, 0.7);
+
+$pretty-menus-menu-active-background-color: $pretty-theme-color;
+$pretty-menus-menu-active-color: #fff;
+
+$pretty-menus-menu-hover-background-color: #1e282c;
+$pretty-menus-menu-hover-color: #fff;
+
+/*树*/
+$pretty-tree-color: #fff;
+$pretty-tree-background-color: $pretty-theme-color;
+
+/*对话框*/
+$pretty-dialog-icon-color: #fff;

package/packages/skins/pretty/styles/themes/orange-light/_index.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+&.theme-orange-light {
+  @import '../theme';
+}

package/packages/skins/pretty/styles/themes/orange-light/_variables.scss

@@ -0,0 +1,38 @@
+/*主题色*/
+$pretty-theme-color: rgb(230, 162, 60);
+$pretty-theme-color-transpart: #faecd8;
+/*header*/
+$pretty-header-background-color: $pretty-theme-color;
+$pretty-header-color: #fff;
+
+/*面包屑*/
+$pretty-breadcrumb-color: #e4e7ed;
+$pretty-breadcrumb-separator-color: #dcdfe6;
+$pretty-breadcrumb-link-color: #fff;
+
+/*main*/
+$pretty-main-background-color: #f0f0f0;
+
+/*sidebar*/
+$pretty-sidebar-background-color: #f9fafc;
+
+/*logo*/
+$pretty-logo-box-background-color: $pretty-theme-color;
+$pretty-logo-text-color: #fff;
+
+/*menus*/
+$pretty-menus-background-color: #fff;
+$pretty-menus-menu-color: #444;
+
+$pretty-menus-menu-active-background-color: $pretty-theme-color-transpart;
+$pretty-menus-menu-active-color: $pretty-theme-color;
+
+$pretty-menus-menu-hover-background-color: $pretty-theme-color-transpart;
+$pretty-menus-menu-hover-color: $pretty-theme-color;
+
+/*树*/
+$pretty-tree-color: #fff;
+$pretty-tree-background-color: $pretty-theme-color;
+
+/*对话框*/
+$pretty-dialog-icon-color: #fff;

package/packages/skins/pretty/styles/themes/pink/_index.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+&.theme-pink {
+  @import '../theme';
+}

package/packages/skins/pretty/styles/themes/pink/_variables.scss

@@ -0,0 +1,40 @@
+/*主题色*/
+$pretty-theme-color: rgb(114, 46, 209);
+$pretty-theme-color-transpart: #f9f0ff;
+/*header*/
+$pretty-header-background-color: $pretty-theme-color;
+$pretty-header-color: #fff;
+
+$pretty-sidebar-toggle-btn-color: #fff;
+
+/*面包屑*/
+$pretty-breadcrumb-color: #e4e7ed;
+$pretty-breadcrumb-separator-color: #dcdfe6;
+$pretty-breadcrumb-link-color: #fff;
+
+/*main*/
+$pretty-main-background-color: #f0f0f0;
+
+/*sidebar*/
+$pretty-sidebar-background-color: #222d32;
+
+/*logo*/
+$pretty-logo-box-background-color: $pretty-theme-color;
+$pretty-logo-text-color: #fff;
+
+/*menus*/
+$pretty-menus-background-color: $pretty-sidebar-background-color;
+$pretty-menus-menu-color: rgba(255, 255, 255, 0.7);
+
+$pretty-menus-menu-active-background-color: $pretty-theme-color;
+$pretty-menus-menu-active-color: #fff;
+
+$pretty-menus-menu-hover-background-color: #1e282c;
+$pretty-menus-menu-hover-color: #fff;
+
+/*树*/
+$pretty-tree-color: #fff;
+$pretty-tree-background-color: $pretty-theme-color;
+
+/*对话框*/
+$pretty-dialog-icon-color: #fff;

package/packages/skins/pretty/styles/themes/pink-light/_index.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+&.theme-pink-light {
+  @import '../theme';
+}

package/packages/skins/pretty/styles/themes/pink-light/_variables.scss

@@ -0,0 +1,40 @@
+/*主题色*/
+$pretty-theme-color: rgb(114, 46, 209);
+$pretty-theme-color-transpart: #f9f0ff;
+/*header*/
+$pretty-header-background-color: $pretty-theme-color;
+$pretty-header-color: #fff;
+
+$pretty-sidebar-toggle-btn-color: #fff;
+
+/*面包屑*/
+$pretty-breadcrumb-color: #e4e7ed;
+$pretty-breadcrumb-separator-color: #dcdfe6;
+$pretty-breadcrumb-link-color: #fff;
+
+/*main*/
+$pretty-main-background-color: #f0f0f0;
+
+/*sidebar*/
+$pretty-sidebar-background-color: #f9fafc;
+
+/*logo*/
+$pretty-logo-box-background-color: $pretty-theme-color;
+$pretty-logo-text-color: #fff;
+
+/*menus*/
+$pretty-menus-background-color: #fff;
+$pretty-menus-menu-color: #444;
+
+$pretty-menus-menu-active-background-color: $pretty-theme-color-transpart;
+$pretty-menus-menu-active-color: $pretty-theme-color;
+
+$pretty-menus-menu-hover-background-color: $pretty-theme-color-transpart;
+$pretty-menus-menu-hover-color: $pretty-theme-color;
+
+/*树*/
+$pretty-tree-color: #fff;
+$pretty-tree-background-color: $pretty-theme-color;
+
+/*对话框*/
+$pretty-dialog-icon-color: #fff;

package/packages/store/index.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+// 状态实例
+let store
+// 状态配置项
+let storeOptions = {
+  namespaced: true,
+  modules: {
+    app: {
+      namespaced: true,
+      modules: {}
+    },
+    module: {
+      namespaced: true,
+      modules: {}
+    }
+  }
+}
+
+const requireComponent = require.context('./modules', true, /\.js$/)
+requireComponent.keys().map(fileName => {
+  const key = fileName.replace('./', '').replace('.js', '')
+  storeOptions.modules.app.modules[key] = requireComponent(fileName).default
+})
+
+export default () => {
+  store = new Vuex.Store(storeOptions)
+}
+
+export { store, storeOptions }

package/packages/store/modules/account.js

@@ -0,0 +1,133 @@
+import db from '../../utils/db'
+
+// 解析路由菜单和面包屑信息
+let routeMenus = new Map()
+const resolveRouteMenus = (menu, rootId, bc) => {
+  let bc_ = Object.assign([], bc)
+  if (menu.type === 1) {
+    bc_.push({
+      title: menu.name,
+      route: ''
+    })
+    menu.rootId = rootId
+    routeMenus.set(menu.routeName + '|' + (menu.routeParams || '{}'), { menu, breadcrumb: bc_ })
+  } else if (menu.type === 0) {
+    bc_.push({
+      title: menu.name,
+      route: ''
+    })
+    menu.children.map(m => {
+      resolveRouteMenus(m, rootId, bc_)
+    })
+  }
+}
+
+export default {
+  namespaced: true,
+  state: {
+    /** 账户编号 */
+    id: '',
+    /** 账户类型 */
+    type: 0,
+    /** 用户名 */
+    name: '',
+    /** 菜单列表 */
+    menus: [],
+    /** 权限列表 */
+    permissions: [],
+    /** 按钮列表 */
+    buttons: [],
+    /** 皮肤设置 */
+    skin: {
+      /** 名称 */
+      name: 'pretty',
+      /** 主题 */
+      theme: '',
+      /** 字号 medium/small/mini */
+      fontSize: ''
+    },
+    /** 路由菜单集合 */
+    routeMenus: null
+  },
+  getters: {
+    // 当前账户拥有菜单对应的路由列表
+    routes: state => {
+      let list = []
+      if (state.routeMenus) {
+        state.routeMenus.forEach((value, key) => {
+          list.push(key.split('|')[0])
+        })
+      }
+      return list
+    }
+  },
+  actions: {
+    /**
+     * @description 初始化
+     */
+    async init({ state, rootState, commit, dispatch }) {
+      if (state.id) return
+
+      try {
+        let authInfo = await rootState.app.system.actions.getAuthInfo()
+
+        // 设置皮肤
+        dispatch('app/skins/init', authInfo.skin, { root: true })
+
+        // 初始化
+        commit('init', authInfo)
+
+        // 初始化路由菜单数组
+        dispatch('initRouteMenus', authInfo)
+
+        const accountId = await dispatch('cacheGet')
+
+        // 如果账户变了，则需要清除原有的一些数据
+        if (authInfo.id !== accountId) {
+          dispatch('app/page/reset', null, { root: true })
+        }
+
+        dispatch('cacheSet')
+      } catch (error) {
+        console.log(error)
+        //如果请求失败则退出
+        dispatch('app/system/logout', null, { root: true })
+      }
+    },
+    cacheGet() {
+      return db.get('accountId')
+    },
+    cacheSet({ state }) {
+      db.set('accountId', state.id)
+    },
+    /** 初始化路由菜单数组 */
+    initRouteMenus({ commit }, account) {
+      routeMenus = new Map()
+      account.menus.map(m => {
+        resolveRouteMenus(m, m.id)
+      })
+      commit('initRouteMenus', routeMenus)
+    },
+    /** 是否拥有指定按钮权限 */
+    hasButton({ state }, button) {
+      if (!button || !button.code) return true
+      const b = !state.buttons.every(c => c !== button.code.toLowerCase())
+      return b
+    }
+  },
+  mutations: {
+    init(state, account) {
+      // 把按钮编码转小写
+      if (account.hasButton) account.buttons = account.buttons.map(b => b.toLowerCase())
+
+      Object.assign(state, account)
+    },
+    initRouteMenus(state, routeMenus) {
+      state.routeMenus = routeMenus
+    },
+    clear(state) {
+      state.id = ''
+      state.name = ''
+    }
+  }
+}

package/packages/store/modules/config.js

@@ -0,0 +1,100 @@
+import _ from 'lodash'
+export default {
+  namespaced: true,
+  state: {
+    system: {
+      /** 标题 */
+      title: '',
+      /** logo */
+      logo: '',
+      /** 用户信息页(路由名称) */
+      userPage: 'userinfo',
+      /** 版权声明 */
+      copyright: ''
+    },
+    /**权限配置 */
+    permission: {
+      //开启权限验证
+      validate: false,
+      //开启按钮权限
+      button: false
+    },
+    /**组件配置 */
+    component: {
+      /**登录设置 */
+      login: {
+        //登录页选项
+        pageTypeOptions: [],
+        //默认登录账户类型
+        defaultAccountType: 0,
+        //登录页类型
+        pageType: null,
+        //是否启用验证码
+        verifyCode: false
+      },
+      /** 工具栏 */
+      toolbar: {
+        // 全屏
+        fullscreen: true,
+        // 皮肤切换
+        skin: true,
+        // 退出
+        logout: true,
+        // 用户信息
+        userInfo: true
+      },
+      //菜单
+      menu: {
+        //是否只能打开一个菜单
+        uniqueOpened: false
+      },
+      //对话框
+      dialog: {
+        //点击模态框是否可关闭对话框
+        closeOnClickModal: false,
+        //对话框默认是否可拖拽
+        draggable: false
+      },
+      //列表页
+      list: {
+        //序号表头名称
+        serialNumberName: '#'
+      },
+      //标签页
+      tabnav: {
+        //是否启用
+        enabled: true,
+        //是否显示首页
+        showHome: true,
+        /** 首页 */
+        homeUrl: '',
+        //是否显示图标
+        showIcon: true,
+        //最大页面数量
+        maxOpenCount: 20
+      },
+      //自定义样式
+      customCss: null
+    }
+  },
+  getters: {
+    logoUrl: s => {
+      return s.system.logo || './images/logo.png'
+    },
+    userPage: s => {
+      return s.system.userPage || 'userinfo'
+    }
+  },
+  actions: {
+    async init({ commit, dispatch }, { config, system, pages }) {
+      commit('init', config)
+      // 配置页面信息
+      await dispatch('app/system/init', { system, pages }, { root: true })
+    }
+  },
+  mutations: {
+    init(state, config) {
+      _.merge(state, config)
+    }
+  }
+}

package/packages/store/modules/dialog-menu.js

@@ -0,0 +1,46 @@
+// 对话框菜单
+const defaultOptions = {
+  title: '',
+  url: '',
+  width: '60%',
+  height: '70%',
+  noScrollbar: true,
+  fullscreen: true
+}
+
+export default {
+  namespaced: true,
+  state: {
+    visible: false,
+    title: '',
+    url: '',
+    width: '60%',
+    height: '70%',
+    noScrollbar: true,
+    fullscreen: true
+  },
+  actions: {
+    /**
+     * @description 打开
+     */
+    open({ commit }, options) {
+      commit('set', options)
+    },
+    /**
+     * @description 打开
+     */
+    close({ commit }, options) {
+      commit('reset', options)
+    }
+  },
+  mutations: {
+    set(state, options) {
+      Object.assign(state, options)
+      state.visible = true
+    },
+    reset(state) {
+      Object.assign(state, defaultOptions)
+      state.visible = false
+    }
+  }
+}

package/packages/store/modules/dialog.js

@@ -0,0 +1,17 @@
+export default {
+  namespaced: true,
+  state: {
+    id: 1000
+  },
+  actions: {
+    open({ state, commit }) {
+      commit('setId')
+      return state.id
+    }
+  },
+  mutations: {
+    setId(state) {
+      state.id++
+    }
+  }
+}

package/packages/store/modules/fullscreen.js

@@ -0,0 +1,37 @@
+import screenfull from 'screenfull'
+
+export default {
+  namespaced: true,
+  state: {
+    // 全屏激活
+    active: false
+  },
+  actions: {
+    /**
+     * @description 切换全屏
+     */
+    toggle({ commit }) {
+      return new Promise(resolve => {
+        if (screenfull.isFullscreen) {
+          screenfull.exit()
+          commit('set', false)
+        } else {
+          screenfull.request()
+          commit('set', true)
+        }
+        // end
+        resolve()
+      })
+    }
+  },
+  mutations: {
+    /**
+     * @description 设置 store 里的全屏状态
+     * @param {Object} state vuex state
+     * @param {Boolean} active active
+     */
+    set(state, active) {
+      state.active = active
+    }
+  }
+}

package/packages/store/modules/loading.js

@@ -0,0 +1,8 @@
+export default {
+  namespaced: true,
+  state: {
+    text: '正在努力加载...',
+    background: 'rgba(255, 255, 255, 0.6)',
+    spinner: 'el-icon-loading'
+  }
+}