haiwei-ui 1.0.0

package/packages/page/login/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="nm-login-container">
+    <component v-bind:is="`nm-login-${type}`"></component>
+  </div>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState('app/config', { loginOptions: s => s.component.login }),
+    type() {
+      if (!this.loginOptions.pageType || !this.loginOptions.pageTypeOptions.includes(this.loginOptions.pageType)) {
+        return 'neon'
+      }
+      return this.loginOptions.pageType
+    }
+  }
+}
+</script>

package/packages/page/userInfo/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <nm-container>
+    <nm-box page header title="账户信息" icon="user">
+      <el-form label-width="120px">
+        <el-row>
+          <el-col :span="10" :offset="1">
+            <el-form-item label="编号：">
+              <el-input :value="id" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="用户名：">
+              <el-input :value="userName" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="10" :offset="1">
+            <el-form-item label="姓名：">
+              <el-input :value="name" disabled />
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="手机号：">
+              <el-input :value="phone" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row>
+          <el-col :span="10" :offset="1">
+            <el-form-item label="邮箱：">
+              <el-input :value="email" disabled />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </nm-box>
+  </nm-container>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState('app/account', ['id', 'userName', 'name', 'phone', 'email'])
+  }
+}
+</script>

package/packages/router/index.js

@@ -0,0 +1,100 @@
+import 'nprogress/nprogress.css'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import SkinsRoutes from './routes'
+import NProgress from 'nprogress'
+
+// 路由实例
+let router
+// 路由集合
+let routes = SkinsRoutes
+
+// 错误路由
+const errorRoutes = ['error403', 'error404']
+
+Vue.use(VueRouter)
+
+// 进度条初始值
+NProgress.configure({ minimum: 0.2 })
+
+/** 初始化路由 */
+export default (store, config) => {
+  router = new VueRouter({ routes })
+
+  // 路由过滤器
+  router.beforeEach((to, from, next) => {
+    // 开始进度条
+    NProgress.start()
+
+    //如果是框架外的页面，或者不需要权限验证，不走验证逻辑
+    if (to.meta && (to.meta.frameIn === false || to.meta.noPermission)) {
+      next()
+      // 关闭进度条
+      NProgress.done()
+      return
+    }
+
+    // 默认页
+    const homeUrl = config.component.tabnav.homeUrl
+    // 如果访问的是 / 或者 /default，则跳转到首页
+    if (homeUrl && (to.path === '/' || to.path === '/default')) {
+      if (homeUrl.startsWith('http://') || homeUrl.startsWith('https://')) {
+        next({ name: 'iframe', params: { url: homeUrl, tn_: '首页' } })
+      } else {
+        next(homeUrl)
+      }
+
+      // 关闭进度条
+      NProgress.done()
+      return
+    }
+    // 验证是否已登录，根据本地是否存在token判断
+    const token = store.state.app.token.accessToken
+    if (!token && to.name !== 'login') {
+      next({ name: 'login', query: { redirect: to.fullPath } })
+    } else {
+      if (to.name === 'login') {
+        next()
+        // 关闭进度条
+        NProgress.done()
+      } else {
+        // 加载账户信息，内部会做是否已加载判断
+        store
+          .dispatch('app/account/init', null, {
+            root: true
+          })
+          .then(() => {
+            // 错误页
+            if (errorRoutes.includes(to.name)) {
+              next()
+              // 关闭进度条
+              NProgress.done()
+            } else if (
+              !store.state.app.config.permission.validate ||
+              store.getters['app/account/routes'].includes(to.name) ||
+              to.path === homeUrl ||
+              to.path === '/' ||
+              to.path === '/default' ||
+              to.name === 'iframe' ||
+              to.name === 'userinfo'
+            ) {
+              // 打开页面
+              store.dispatch('app/page/open', to, { root: true }).then(() => {
+                next()
+
+                // 关闭进度条
+                NProgress.done()
+              })
+            } else {
+              next({ name: 'error403' })
+
+              // 关闭进度条
+              NProgress.done()
+            }
+          })
+      }
+    }
+  })
+}
+
+export { router, routes }

package/packages/router/routes.js

@@ -0,0 +1,60 @@
+export default [
+  {
+    // 默认页
+    path: '/',
+    name: 'default',
+    component: () => import(/* webpackChunkName: "default" */ '../page/default/'),
+    meta: {
+      title: '默认页',
+      cache: false
+    }
+  },
+  {
+    // 登录页
+    path: '/login',
+    name: 'login',
+    component: () => import(/* webpackChunkName: "default" */ '../page/login/'),
+    meta: {
+      title: '登录',
+      cache: false,
+      frameIn: false
+    }
+  },
+  {
+    // 默认个人信息页
+    path: '/userinfo',
+    name: 'userinfo',
+    component: () => import(/* webpackChunkName: "userinfo" */ '../page/userInfo/'),
+    meta: {
+      title: '个人信息',
+      cache: false
+    }
+  },
+  {
+    // 内嵌页面
+    path: '/iframe/:url',
+    name: 'iframe',
+    component: () => import(/* webpackChunkName: "frame" */ '../page/iframe/')
+  },
+  {
+    // 403
+    path: '/error/403',
+    name: 'error403',
+    component: () => import(/* webpackChunkName: "error_403" */ '../page/403'),
+    meta: {
+      title: 'Error 403',
+      cache: false
+    }
+  },
+  {
+    // 404
+    path: '/error/404',
+    name: 'error404',
+    component: () => import(/* webpackChunkName: "error_404" */ '../page/404'),
+    meta: {
+      title: 'Error 404',
+      cache: false
+    }
+  },
+  { path: '*', redirect: '/error/404' }
+]

package/packages/skins/pretty/components/header/components/breadcrumb/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-breadcrumb class="nm-breadcrumb" separator="/">
+    <transition-group name="breadcrumb">
+      <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="`${index}_${item.route}`" :to="item.route">{{ item.title }}</el-breadcrumb-item>
+    </transition-group>
+  </el-breadcrumb>
+</template>
+<script>
+import { mapState } from 'vuex'
+export default {
+  computed: {
+    ...mapState('app/account', ['routeMenus']),
+    ...mapState('app/page', ['default']),
+    breadcrumb() {
+      let route = this.$route
+      let bc = [
+        {
+          title: '首页',
+          route: '/'
+        }
+      ]
+
+      if (!route.name || this.default === route.path) {
+        return bc
+      }
+
+      if (this.routeMenus) {
+        const obj = this.routeMenus.get(route.name)
+        if (obj) {
+          bc = bc.concat(obj.breadcrumb)
+        }
+      }
+
+      // 通过路由自定义的最后一个面包屑
+      if (route.params && route.params.bc_) {
+        bc.push({
+          title: route.params.bc_,
+          route: ''
+        })
+      }
+      return bc
+    }
+  }
+}
+</script>

package/packages/skins/pretty/components/header/components/theme/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-dropdown :hide-on-click="false">
+    <span class="el-dropdown-link">
+      <nm-icon name="skin" />主题
+      <i class="el-icon-arrow-down el-icon--right"></i>
+    </span>
+    <el-dropdown-menu v-slot:dropdown>
+      <el-dropdown-item v-for="info in list" v-bind:key="info.name">
+        <span v-html="info.name" @click="themeChange(info)"></span>
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+<script>
+import list from './list'
+import { mapState, mapMutations } from 'vuex'
+export default {
+  data() {
+    return {
+      list
+    }
+  },
+  computed: {
+    ...mapState('app/skins', ['current'])
+  },
+  methods: {
+    ...mapMutations('app/skins', ['themeChange'])
+  }
+}
+</script>
+<style>
+.el-dropdown-link {
+  cursor: pointer;
+  color: #409eff;
+}
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+</style>

package/packages/skins/pretty/components/header/components/theme/list.js

@@ -0,0 +1,82 @@
+const list = [
+  {
+    name: '默认主题',
+    theme: 'nm-theme-0',
+    sideColor: '#DCDCDC',
+    headerColor: ''
+  },
+  {
+    name: '黑色主题',
+    theme: 'nm-theme-1',
+    sideColor: '#2c3b41',
+    headerColor: '#CC00FF'
+  },
+  {
+    name: '黑色主题-亮',
+    theme: 'nm-theme-2',
+    sideColor: '#DCDCDC',
+    headerColor: '#CC00FF'
+  },
+  {
+    name: '红色主题',
+    theme: 'nm-theme-3',
+    sideColor: '#2c3b41',
+    headerColor: '#DD4B39'
+  },
+  {
+    name: '红色主题-亮',
+    theme: 'nm-theme-4',
+    sideColor: '#DCDCDC',
+    headerColor: '#DD4B39'
+  },
+  {
+    name: '绿色主题',
+    theme: 'nm-theme-5',
+    sideColor: '#2c3b41',
+    headerColor: '#00a65a'
+  },
+  {
+    name: '绿色主题-亮',
+    theme: 'nm-theme-6',
+    sideColor: '#DCDCDC',
+    headerColor: '#00a65a'
+  },
+  {
+    name: '紫色主题',
+    theme: 'nm-theme-7',
+    sideColor: '#2c3b41',
+    headerColor: '#605ca8'
+  },
+  {
+    name: '紫色主题-亮',
+    theme: 'nm-theme-8',
+    sideColor: '#DCDCDC',
+    headerColor: '#605ca8'
+  },
+  {
+    name: '蓝色主题',
+    theme: 'nm-theme-9',
+    sideColor: '#2c3b41',
+    headerColor: '#3c8dbc'
+  },
+  {
+    name: '蓝色主题-亮',
+    theme: 'nm-theme-10',
+    sideColor: '#DCDCDC',
+    headerColor: '#3c8dbc'
+  },
+  {
+    name: '橙色主题',
+    theme: 'nm-theme-11',
+    sideColor: '#2c3b41',
+    headerColor: '#f39c12'
+  },
+  {
+    name: '橙色主题-亮',
+    theme: 'nm-theme-12',
+    sideColor: '#DCDCDC',
+    headerColor: '#f39c12'
+  }
+]
+
+export default list

package/packages/skins/pretty/components/header/index.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="nm-header">
+    <section class="nm-header-left">
+      <!--Logo-->
+      <section class="nm-logo-box">
+        <img :src="logoUrl" class="nm-logo-img" :alt="title" :title="title" />
+        <div class="nm-logo-text">{{ title }}</div>
+      </section>
+      <!--折叠按钮-->
+      <a class="nm-sidebar-toggle-btn" @click.prevent="sidebarToggle">
+        <nm-icon :name="sidebarCollapse ? 'indent-left' : 'indent-right'" />
+      </a>
+      <!--面包屑-->
+      <breadcrumb />
+    </section>
+    <section class="nm-header-right">
+      <!--工具栏-->
+      <div class="nm-header-toolbar">
+        <nm-toolbar />
+      </div>
+    </section>
+  </section>
+</template>
+<script>
+import { mapState, mapGetters, mapActions } from 'vuex'
+import Breadcrumb from './components/breadcrumb'
+export default {
+  components: { Breadcrumb },
+  computed: {
+    ...mapGetters('app/config', ['logoUrl']),
+    ...mapState('app/config', { title: s => s.system.title }),
+    ...mapState('app/skins/pretty/sidebar', { sidebarCollapse: 'collapse' })
+  },
+  methods: {
+    ...mapActions('app/skins/pretty/sidebar', { sidebarToggle: 'toggle' })
+  }
+}
+</script>

package/packages/skins/pretty/components/main/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <section class="nm-main">
+    <div class="nm-main-left">
+      <nm-sidebar />
+    </div>
+    <div class="nm-main-right">
+      <nm-tabnav v-if="showTabnav" />
+      <section class="nm-content">
+        <transition name="fade-transverse">
+          <keep-alive v-if="showTabnav" :include="keepAlive">
+            <router-view v-if="routerViewVisible" :key="$route.path" />
+          </keep-alive>
+
+          <router-view v-if="!showTabnav && routerViewVisible" :key="$route.path" />
+        </transition>
+      </section>
+    </div>
+  </section>
+</template>
+<script>
+import NmSidebar from '../sidebar'
+import { mapState, mapMutations } from 'vuex'
+export default {
+  components: { NmSidebar },
+  data() {
+    return {
+      routerViewVisible: true
+    }
+  },
+  computed: {
+    ...mapState('app/page', ['keepAlive']),
+    ...mapState('app/config', { showTabnav: s => s.component.tabnav.enabled })
+  },
+  provide() {
+    return {
+      reload: this.reload
+    }
+  },
+  methods: {
+    ...mapMutations('app/page', ['keepAliveRemove']),
+    reload(name) {
+      this.routerViewVisible = false
+      this.keepAliveRemove(name)
+
+      this.$nextTick(() => {
+        this.routerViewVisible = true
+      })
+    }
+  }
+}
+</script>

package/packages/skins/pretty/components/menus/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="nm-menus">
+    <el-scrollbar>
+      <el-menu :default-active="active" :unique-opened="uniqueOpened" :collapse="collapse" :collapse-transition="false">
+        <template v-for="menu in menus">
+          <el-submenu v-if="menu.type === 0" :key="menu.id" :index="menu.id + ''">
+            <template v-slot:title>
+              <nm-icon :name="menu.icon" class="nm-menus-icon" :style="{ color: menu.iconColor }" />
+              <span>{{ menu.name }}</span>
+            </template>
+            <template v-for="item in menu.children">
+              <menu-item v-if="item.show" :key="item.id" :menu="item" :parent-index="menu.id" />
+            </template>
+          </el-submenu>
+
+          <el-menu-item v-else :key="menu.id" :index="menu.id + ''" @click="go(menu, $event)">
+            <nm-icon :name="menu.icon" class="nm-menus-icon" :style="{ color: menu.iconColor }" />
+            <span>{{ menu.name }}</span>
+          </el-menu-item>
+        </template>
+      </el-menu>
+    </el-scrollbar>
+  </section>
+</template>
+<script>
+import { mapState } from 'vuex'
+import { open } from '../../../../utils/menu'
+import MenuItem from './item'
+
+export default {
+  components: { MenuItem },
+  computed: {
+    ...mapState('app/account', ['menus', 'routeMenus']),
+    ...mapState('app/config', { uniqueOpened: s => s.component.menu.uniqueOpened }),
+    ...mapState('app/page', ['current']),
+    ...mapState('app/skins/pretty/sidebar', ['collapse']),
+    active: {
+      get() {
+        const { current, routeMenus } = this
+        if (current.name && routeMenus) {
+          let routeMenu = routeMenus.get(current.code)
+          if (routeMenu) {
+            return routeMenu.menu.id
+          }
+        }
+        return '-1'
+      },
+      set() {}
+    }
+  },
+  methods: {
+    go(menu, e) {
+      if (e.$el.classList.contains('is-active')) {
+        return
+      }
+      open(this.$router, menu)
+    }
+  }
+}
+</script>

package/packages/skins/pretty/components/menus/item.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-submenu v-if="menu.type === 0" :index="menu.id + ''">
+    <template v-slot:title>
+      <nm-icon :name="menu.icon" class="nm-menus-icon" :style="{ color: menu.iconColor }" />
+      <span>{{ menu.name }}</span>
+    </template>
+    <template v-for="item in menu.children">
+      <menu-item v-if="item.show" :key="item.id" :menu="item" :parent-index="menu.id" />
+    </template>
+  </el-submenu>
+
+  <el-menu-item v-else :index="menu.id + ''" :parent-index="parentIndex" @click="go(menu, $event)">
+    <nm-icon :name="menu.icon" class="nm-menus-icon" :style="{ color: menu.iconColor }" />
+    <span>{{ menu.name }}</span>
+  </el-menu-item>
+</template>
+<script>
+import { mapActions } from 'vuex'
+import { open } from '../../../../utils/menu'
+export default {
+  name: 'MenuItem',
+  props: {
+    parentIndex: {
+      type: String,
+      default: ''
+    },
+    menu: {}
+  },
+  methods: {
+    ...mapActions('app/dialog-menu', { dialogMenuOpen: 'open' }),
+    go(menu, e) {
+      if (e.$el.classList.contains('is-active')) {
+        return
+      }
+
+      open(this.$router, menu)
+    },
+    getIndex(index) {
+      if (this.parentIndex === 0) {
+        return index + ''
+      }
+      return this.parentIndex + '-' + index
+    }
+  }
+}
+</script>

package/packages/skins/pretty/components/sidebar/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <section class="nm-sidebar" :class="{ collapse: collapse }">
+    <section class="nm-menu-wapper">
+      <nm-menus />
+    </section>
+  </section>
+</template>
+<script>
+import NmMenus from '../menus'
+import { mapState } from 'vuex'
+export default {
+  components: { NmMenus },
+  computed: {
+    ...mapState('app/skins/pretty/sidebar', ['collapse'])
+  }
+}
+</script>

package/packages/skins/pretty/index.js

@@ -0,0 +1,47 @@
+import store from './store'
+import component from './index.vue'
+import preview from './preview.png'
+
+export default {
+  component,
+  store,
+  options: {
+    name: '靓丽',
+    code: 'pretty',
+    preview,
+    themes: [
+      {
+        name: 'default',
+        color: '#03a9f4'
+      },
+      {
+        name: 'blue-light',
+        color: '#e4e7ed'
+      },
+      {
+        name: 'green',
+        color: '#00a65a'
+      },
+      {
+        name: 'green-light',
+        color: '#e4e7ed'
+      },
+      {
+        name: 'orange',
+        color: '#e6a23c'
+      },
+      {
+        name: 'orange-light',
+        color: '#e4e7ed'
+      },
+      {
+        name: 'pink',
+        color: 'rgb(114, 46, 209)'
+      },
+      {
+        name: 'pink-light',
+        color: '#e4e7ed'
+      }
+    ]
+  }
+}

package/packages/skins/pretty/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="nm-wrapper">
+    <nm-header />
+    <nm-main />
+  </div>
+</template>
+<script>
+import NmHeader from './components/header'
+import NmMain from './components/main'
+export default {
+  components: { NmHeader, NmMain }
+}
+</script>
+<style lang="scss">
+@import './styles/_index.scss';
+</style>

package/packages/skins/pretty/store/index.js

@@ -0,0 +1,8 @@
+import sidebar from './modules/sidebar'
+export default {
+  namespaced: true,
+  state: {},
+  modules: {
+    sidebar
+  }
+}