feat: saas 菜单页面

src/common/components/element-ui.js

@@ -18,6 +18,11 @@ import {
   Option,
   Cascader,
   Radio,
+  Menu,
+  Submenu,
+  MenuItem,
+  MenuItemGroup,
+  Tag,
 } from 'element-ui'
 
 const components = [
@@ -35,6 +40,11 @@ const components = [
   Option,
   Cascader,
   Radio,
+  Menu,
+  MenuItem,
+  Submenu,
+  MenuItemGroup,
+  Tag,
 ]
 
 export default {

src/common/style/index.scss

@@ -42,3 +42,9 @@
   background-color: #1565C0;
   border-color: #1565C0;
 }
+
+.card {
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 8px;
+}

src/main.js

@@ -11,6 +11,16 @@ Vue.config.productionTip = false
 Vue.use(element)
 Vue.use(vxeTable)
 
+router.afterEach((to, from) => {
+  if (to.path === '/login') return
+  store.commit('tags/add', {
+    name: to.name,
+    path: to.fullPath,
+    title: to.meta?.title || to.name,
+  })
+  store.commit('tags/setActive', to.name)
+})
+
 new Vue({
   router,
   store,

src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import HomeView from '../views/home/HomeView.vue'
 import SaasManage from '@/views/saasManage/indexPage.vue'
 import LoginPage from '@/views/LoginPage.vue'
-import menu from '@/views/menu'
+import menuPage from '@/views/menu.vue'
+
+export const DEFAULT_DASHBOARD = 'saasManage'
 
 Vue.use(VueRouter)
 
 const routes = [
   {
-    path: '/',
-    name: 'home',
-    component: HomeView,
-  },
-  {
     path: '/login',
     name: 'login',
     component: LoginPage,
   },
   {
-    path: '/saas/manage',
-    name: 'saasManage',
-    component: SaasManage,
-  },
-  {
-    path: '/saas/menu',
-    component: menu,
-    name: 'saasMenu',
+    path: '/',
+    name: 'home',
+    component: HomeView,
+    redirect: '/saas/manage',
+    children: [
+      {
+        path: '/saas/manage',
+        name: 'saasManage',
+        meta: { title: 'SaaS管理页面' },
+        component: SaasManage,
+      },
+      {
+        path: '/saas/menu',
+        component: menuPage,
+        name: 'saasMenu',
+        meta: { title: '菜单管理' },
+      },
+    ],
   },
 ]
 

src/store/index.js

 import Vue from 'vue'
 import Vuex from 'vuex'
 
+import tags from './tags'
+
 Vue.use(Vuex)
 
 export default new Vuex.Store({
@@ -18,5 +20,7 @@ export default new Vuex.Store({
       commit('setKeyCode', msg)
     },
   },
-  modules: {},
+  modules: {
+    tags,
+  },
 })

src/store/tags.js

+const lastSavedTags =
+  JSON.parse(localStorage.getItem('tags')) || []
+let tagId = lastSavedTags.reduce(
+  (a, c) => Math.max(a, c.id),
+  0,
+)
+
+/**
+ * @type {import('vuex').StoreOptions}
+ */
+const tags = {
+  namespaced: true,
+  state: {
+    tags: lastSavedTags,
+    activeTag: undefined,
+  },
+  getters: {
+    currentTag(state) {
+      return state.tags.find(
+        (e) => e.name === state.activeTag,
+      )
+    },
+  },
+  mutations: {
+    add(state, tag) {
+      const item = {
+        ...tag,
+        id: ++tagId,
+      }
+      const index = state.tags.findIndex(
+        (t) => t.name === tag.name,
+      )
+      if (index === -1) {
+        state.tags.push(item)
+      }
+      localStorage.setItem(
+        'tags',
+        JSON.stringify(state.tags),
+      )
+      return item.id
+    },
+    setActive(state, name) {
+      if (!state.tags.some((e) => e.name === name)) return
+      state.activeTag = name
+    },
+    remove(state, name) {
+      const index = state.tags.findIndex(
+        (e) => e.name === name,
+      )
+      if (index === -1) return
+      state.tags.splice(index, 1)
+
+      // 如果关闭的是当前的 tag，就转到前一个标签
+      if (state.activeTag === name) {
+        let prevIndex = index - 1
+        if (prevIndex < 0) prevIndex = 0
+        if (state.tags.length === 0) {
+          state.activeTag = undefined
+        } else {
+          state.activeTag = state.tags[prevIndex].name
+        }
+      }
+
+      localStorage.setItem(
+        'tags',
+        JSON.stringify(state.tags),
+      )
+    },
+  },
+}
+
+export default tags

src/views/HomeView.vue

-<template>
-  <div class="home"></div>
-</template>
-
-<script>
-// @ is an alias to /src
-export default {
-  name: 'HomeView',
-  created() {
-    this.$router.push('/saas/manage')
-  },
-}
-</script>

src/views/LoginPage.vue

 <template>
   <div class="login-page">
-    <div class="system-name">SaaS 管理平台</div>
+    <div class="system-name">SAAS 管理平台</div>
     <div class="login-view">
       <h2>登录</h2>
       <el-form :model="loginForm" class="login-form">

src/views/home/HomeHeader.vue

+<template>
+  <div class="home-header">
+    <page-tags />
+    <div class="user-area">
+      <span class="user-name">系统管理员</span>
+      <el-button type="text">注销</el-button>
+    </div>
+  </div>
+</template>
+<script>
+import pageTags from './pageTags.vue'
+
+export default {
+  components: { pageTags },
+  name: 'HomeHeader',
+}
+</script>
+<style lang="scss" scoped>
+.home-header {
+  display: flex;
+  overflow: hidden;
+}
+
+.page-tags {
+  flex: 1;
+  overflow: auto hidden;
+}
+
+.user-area {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-right: 16px;
+
+  .user-name {
+    margin-right: 10px;
+  }
+}
+</style>

src/views/home/HomeView.vue

+<template>
+  <div class="home">
+    <nav-menu></nav-menu>
+    <div class="right">
+      <home-header />
+      <div class="content">
+        <router-view></router-view>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import NavMenu from './navMenu.vue'
+import HomeHeader from './HomeHeader.vue'
+
+// @ is an alias to /src
+export default {
+  name: 'HomeView',
+  components: {
+    NavMenu,
+    HomeHeader,
+  },
+  created() {
+    // this.$router.push('/saas/manage')
+  },
+  data() {
+    return {}
+  },
+}
+</script>
+<style lang="scss" scoped>
+.home {
+  height: 100%;
+  display: flex;
+  overflow: hidden;
+
+  &::v-deep {
+    .el-menu {
+      height: 100%;
+    }
+  }
+}
+
+.nav-menu {
+  height: 100%;
+  width: 240px;
+}
+
+.right {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.home-header {
+  height: 50px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+  flex-shrink: 0;
+  z-index: 100;
+}
+
+.content {
+  flex: 1;
+  padding: 10px 10px 0px 10px;
+  background-color: #f1f1f1;
+}
+</style>

src/views/home/navMenu.vue

+<template>
+  <div class="nav-menu">
+    <div class="header-logo">
+      <span>SAAS 管理平台</span>
+    </div>
+    <el-menu
+      ref="menu"
+      router
+      :default-active="this.$route.path"
+      class="el-menu-vertical-demo"
+      text-color="#fff"
+      background-color="#1565C0"
+      @click.native="onClickMenus"
+      active-text-color="#ffd04b"
+    >
+      <div
+        class="menu-list"
+        v-for="nav in menuList"
+        :key="nav.id"
+      >
+        <el-menu-item
+          v-if="nav.children.length === 0"
+          :index="nav.index"
+        >
+          <template slot="title">
+            <i :class="nav.icon"></i>
+            <span class="label">{{ nav.label }}</span>
+          </template>
+        </el-menu-item>
+        <el-submenu v-else :index="nav.index">
+          <template slot="title">
+            <i :class="nav.icon"></i>
+            <span class="label">{{ nav.label }}</span>
+          </template>
+          <el-menu-item
+            :index="subs.index"
+            v-for="subs in nav.children"
+            :key="subs.id"
+          >
+            <template slot="title">
+              <i :class="subs.icon"></i>
+              <span class="label">{{
+                subs.label
+              }}</span></template
+            >
+          </el-menu-item>
+        </el-submenu>
+      </div>
+    </el-menu>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+export default {
+  name: 'navMenu',
+  data() {
+    return {
+      menuList: [
+        {
+          id: 1,
+          path: '',
+          label: 'SaaS管理页面',
+          icon: 'el-icon-menu',
+          index: '/saas/manage',
+          children: [],
+        },
+        {
+          id: 2,
+          path: '',
+          label: '系统管理',
+          icon: 'el-icon-setting',
+          index: '/system',
+          children: [
+            {
+              id: 3,
+              path: '',
+              label: '菜单管理',
+              icon: '',
+              index: '/saas/menu',
+              children: [],
+            },
+          ],
+        },
+      ],
+    }
+  },
+  computed: {
+    ...mapGetters('tags', ['currentTag']),
+  },
+  watch: {
+    currentTag(v) {
+      if (!v) return
+      const parent = this.menuList.find((e) => {
+        if (e.path === v.path) return true
+        if (e.children) {
+          return e.children.some((ee) => ee.path === v.path)
+        }
+        return false
+      })
+      if (parent) {
+        this.$refs.menu.open(parent.path)
+      }
+    },
+  },
+  methods: {
+    onClickMenus() {},
+  },
+}
+</script>
+<style lang="scss" scoped>
+.nav-menu {
+  &::v-deep {
+    .el-submenu__title i {
+      color: #fff;
+    }
+  }
+  i {
+    color: #fff;
+  }
+}
+
+.header-logo {
+  font-size: 20px;
+  color: #fff;
+  font-weight: bold;
+  padding: 12px 20px;
+  font-style: italic;
+  border-right: 1px solid #e6e6e6;
+  background-color: #1565C0;
+}
+
+.label {
+  font-size: 16px;
+}
+</style>

src/views/home/pageTags.vue

+<template>
+  <div class="page-tags">
+    <div
+      v-for="t in tags"
+      :key="t.id"
+      class="page-tag"
+      :class="{ active: activeTag === t.name }"
+      @click="switchTag(t)"
+    >
+      <span class="page-tag-title">{{ t.title }}</span>
+      <span
+        v-if="t.name !== DEFAULT_DASHBOARD"
+        class="page-tag-close"
+        @click.stop="closeTag(t)"
+        ><i class="el-icon-close"></i
+      ></span>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters, mapState } from 'vuex'
+import { DEFAULT_DASHBOARD } from '@/router'
+
+export default {
+  name: 'pageTags',
+  data() {
+    return {
+      DEFAULT_DASHBOARD,
+    }
+  },
+  computed: {
+    ...mapState('tags', ['tags', 'activeTag']),
+    ...mapGetters('tags', ['currentTag']),
+  },
+  methods: {
+    switchTag(t) {
+      this.$store.commit('tags/setActive', t.name)
+      this.$router.push(t.path)
+    },
+    closeTag(t) {
+      this.$store.commit('tags/remove', t.name)
+      if (this.currentTag) {
+        // 切换到前一个标签页
+        if (this.$route.fullPath !== this.currentTag.path) {
+          this.$router.push({
+            path: this.currentTag.path,
+          })
+        }
+      }
+    },
+  },
+}
+</script>
+<style lang="scss" scoped>
+.page-tags {
+  display: flex;
+  padding-left: 10px;
+  align-items: center;
+}
+
+.page-tag {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  line-height: 30px;
+  line-height: 30px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  &:not(:last-child) {
+    &:after {
+      content: '';
+      position: absolute;
+      right: 0;
+      top: 15px;
+      bottom: 15px;
+      border-right: solid 1px #ddd;
+    }
+  }
+
+  &.active {
+    background-color: #1565C0;
+    color: #fff;
+    border: 1px solid #1565C0;
+  }
+}
+
+.page-tag:not(:last-child) {
+  margin-right: 6px;
+}
+
+.page-tag-close {
+  border-radius: 50%;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: #fff;
+    color: #409eff;
+  }
+}
+
+.page-tag-title {
+  margin-right: 6px;
+}
+</style>

src/views/menu.vue

 <template>
-  <div class="system-menu">
+  <div class="system-menu card">
     <div class="header">
       <el-form
         size="mini"

src/views/saasManage/indexPage.vue

 <template>
-  <div class="saas-manage">
+  <div class="saas-manage card">
     <div class="search">
       <el-form
         :model="searchForm"
@@ -125,53 +125,71 @@
         <el-table-column
           label="域名"
           prop="domain"
+          min-width="180"
           header-align="center"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="公司名称"
           prop="companyName"
           header-align="center"
           align="center"
+          width="160"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="负责人"
           prop="headName"
           header-align="center"
           align="center"
+          width="140"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="联系电话"
           prop="contactPhone"
           header-align="center"
           align="center"
+          width="140"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="套餐"
           prop="packages"
           header-align="center"
           align="center"
+          width="140"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="资费"
           prop="charges"
           header-align="center"
           align="center"
+          width="140"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="数据库地址"
           prop="dataHost"
           header-align="center"
           align="center"
+          width="160"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="数据库名称"
           prop="databaseName"
           header-align="center"
+          width="160"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="状态"
           header-align="center"
           align="center"
+          width="120"
+          :show-overflow-tooltip="true"
         >
           <template slot-scope="scope">
             <el-switch
@@ -187,18 +205,23 @@
           prop="createTime"
           header-align="center"
           align="center"
+          width="160"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="过期时间"
           prop="expireTime"
           header-align="center"
           align="center"
+          width="160"
+          :show-overflow-tooltip="true"
         ></el-table-column>
         <el-table-column
           label="操作"
           header-align="center"
           align="center"
           width="55"
+          fixed="right"
         >
           <template slot-scope="scope">
             <i
@@ -673,7 +696,6 @@ export default {
   height: 100%;
   overflow: hidden;
   display: flex;
-  padding: 20px 20px 0px 20px;
   flex-direction: column;
 
   &::v-deep {