增加菜单在顶部的布局；修复租户列表帐号数量问题；登录、创建增加租户帐号数量限制校验

src/stores/modules/theme.js

@@ -5,9 +5,9 @@ import { getTheme, setTheme, clearTheme } from '@/utils/storage'
 // 默认布局
 const defaultLayout = {
   /**
-   * 侧边菜单栏模式 1：传统模式 2：分栏模式
+   * 菜单栏模式 1：传统模式 2：分栏模式 3:下上模式
    */
-  sidebarMode: 1,
+  menuLayoutMode: 1,
   /**
   * 导航模式 1：固定导航 2：不固定导航
   */

src/views/layout/components/headbar/components/action/index.vue

@@ -115,7 +115,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="action-container flex-item_f-1 flex flex_j_c-flex-end flex_a_i-center">
+  <div class="action-container flex flex_j_c-flex-end flex_a_i-center">
     <el-tooltip
       content="全屏"
       placement="bottom"

src/views/layout/components/headbar/components/menu/index.vue

@@ -0,0 +1,40 @@
+<script setup>
+import SubMenu from '../../../sub-menu/index.vue'
+
+const menuStore = useMenuStore()
+const themeStore = useThemeStore()
+
+const menuTheme = computed(() => themeStore.color.menu)
+
+const { displayedMenus, active } = storeToRefs(menuStore)
+
+</script>
+
+<template>
+  <div class="menu-container margin-n-20 flex-item_f-1">
+    <el-menu
+      :default-active="active"
+      :text-color="menuTheme.textColor"
+      :active-text-color="menuTheme.activeTextColor"
+      :unique-opened="true"
+      mode="horizontal">
+      <SubMenu
+        v-for="item in displayedMenus"
+        :key="item.id"
+        :data="item" />
+    </el-menu>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menu-container {
+  max-width: 100%;
+  .el-menu {
+    // flex: 1;
+    // max-width: 100%;
+    // min-width: 300px;
+    border: none;
+    // display: flex;
+  }
+}
+</style>

src/views/layout/components/headbar/components/theme/index.vue

@@ -15,10 +15,10 @@ const mode = computed({
 
 const sidebar = computed({
   get: () => {
-    return themeStore.layout.sidebarMode
+    return themeStore.layout.menuLayoutMode
   },
   set: (val) => {
-    themeStore.layout.sidebarMode = val
+    themeStore.layout.menuLayoutMode = val
     themeStore.setTheme()
   }
 })
@@ -191,7 +191,8 @@ const menuActiveTextColor = computed({
 const visible = ref(false)
 const sidebars = ref([
   { label: '经典模式', value: 1 },
-  { label: '分栏模式', value: 2 }
+  { label: '分栏模式', value: 2 },
+  { label: '上下模式', value: 3 }
 ])
 const navigations = ref([
   { label: '固定导航', value: 1 },

src/views/layout/components/headbar/index.vue

@@ -1,28 +1,41 @@
 <template>
-  <div class="headbar-container padding-n-10 flex flex_w-wrap flex_a_i-center">
-    <el-tooltip
-      content="折叠/展开菜单"
-      placement="bottom"
-      :show-after="500"
-      :hide-after="0"
-      transition="">
-      <Iconfont
-        class="cursor-pointer margin_r-20"
-        :name="`collapse-${collapse ? 'right' : 'left'}`"
-        @click="collapseHandle" />
-    </el-tooltip>
-    <Crumb />
+  <div class="headbar-container padding-n-10 flex flex_w-wrap flex_j_c-space-between flex_a_i-center">
+    <template v-if="menuLayoutMode === 3">
+      <Logo :collapse="false"  />
+      <Menu />
+    </template>
+    <div class="flex flex_a_i-center" v-else>
+      <el-tooltip
+        content="折叠/展开菜单"
+        placement="bottom"
+        :show-after="500"
+        :hide-after="0"
+        transition="">
+        <Iconfont
+          class="cursor-pointer margin_r-20"
+          :name="`collapse-${collapse ? 'right' : 'left'}`"
+          @click="collapseHandle" />
+      </el-tooltip>
+      <Crumb />
+    </div>
+
     <Action />
   </div>
 </template>
 
 <script setup>
+import Logo from '../logo/index.vue'
 import Crumb from './components/crumb/index.vue'
 import Action from './components/action/index.vue'
+import Menu from './components/menu/index.vue'
 
 const menuStore = useMenuStore()
 const { collapse } = storeToRefs(menuStore)
 
+const themeStore = useThemeStore()
+
+const menuLayoutMode = computed(() => themeStore.layout.menuLayoutMode)
+
 /**
  * @description: 菜单栏折叠事件
  * @param {*}
@@ -32,7 +45,6 @@ const { collapse } = storeToRefs(menuStore)
 const collapseHandle = () => {
   collapse.value = !collapse.value
 }
-
 </script>
 
 <style lang="scss" scoped>

src/views/layout/components/sidebar/components/logo/index.vue → src/views/layout/components/logo/index.vue

@@ -13,7 +13,7 @@ const { tenant } = storeToRefs(adminerStore)
 
 <template>
   <div
-    class="logo-container padding-n-10 width-full flex"
+    class="logo-container padding-n-10 flex"
     v-if="tenant.name || tenant.logo">
     <transition name="el-fade-in" mode="out-in">
       <div class="flex flex-item_f-1 flex_j_c-center flex_a_i-center" v-if="!collapse">

src/views/layout/components/sidebar/components/classic/index.vue

@@ -1,6 +1,6 @@
 <script setup>
-import Logo from '../logo/index.vue'
-import SubItem from '../sub/index.vue'
+import Logo from '../../../logo/index.vue'
+import SubMenu from '../../../sub-menu/index.vue'
 
 const menuStore = useMenuStore()
 const themeStore = useThemeStore()
@@ -21,7 +21,7 @@ const { displayedMenus, active, collapse } = storeToRefs(menuStore)
         :active-text-color="menuTheme.activeTextColor"
         :unique-opened="true"
         :collapse="collapse">
-        <SubItem
+        <SubMenu
           v-for="item in displayedMenus"
           :key="item.id"
           :data="item"

src/views/layout/components/sidebar/components/subfield/index.vue

@@ -1,7 +1,6 @@
-
 <script setup>
-import Logo from '../logo/index.vue'
-import SubItem from '../sub/index.vue'
+import Logo from '../../../logo/index.vue'
+import SubMenu from '../../../sub-menu/index.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -105,7 +104,7 @@ watchEffect(() => {
           :active-text-color="menuTheme.activeTextColor"
           :unique-opened="true"
           :collapse="collapse">
-          <SubItem
+          <SubMenu
             v-for="item in activeMenu.children"
             :key="item.id"
             :data="item"

src/views/layout/components/sidebar/index.vue

@@ -5,15 +5,15 @@ import Subfield from './components/subfield/index.vue'
 const route = useRoute()
 
 const menuStore = useMenuStore()
-const settingsStore = useThemeStore()
+const themeStore = useThemeStore()
 
-const sidebarMode = computed(() => settingsStore.layout.sidebarMode)
+const menuLayoutMode = computed(() => themeStore.layout.menuLayoutMode)
 
 const { active } = storeToRefs(menuStore)
 
 const component = computed(() => {
   let result = ''
-  switch (sidebarMode.value) {
+  switch (menuLayoutMode.value) {
     case 1:
       result = Classic
       break

src/views/layout/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="layout-container height-full flex overflow-auto">
-    <Sidebar />
+    <Sidebar v-if="menuLayoutMode !== 3" />
     <component :is="component" class="navigation-container">
       <template #headbar>
         <Headbar />
@@ -29,6 +29,7 @@ const themeStore = useThemeStore()
 const navigationMode = computed(() => themeStore.layout.navigationMode)
 const showTabs = computed(() => themeStore.layout.showTabs)
 const refresh = computed(() => themeStore.refresh)
+const menuLayoutMode = computed(() => themeStore.layout.menuLayoutMode)
 
 const component = computed(() => {
   let result = ''

src/views/modules/system/tenant/components/add-edit.vue

@@ -209,7 +209,7 @@ defineExpose({
           v-model="form.accountCount"
           :min="0"
           :max="999999999"
-          placeholder="帐号额度" />
+          placeholder="不限" />
       </el-form-item>
       <el-form-item label="租户套餐" prop="packageIds">
         <el-select

src/views/modules/system/tenant/index.vue

@@ -256,7 +256,7 @@ onBeforeMount(() => {
           label="帐号额度"
           prop="accountCount">
           <template v-slot="{ row }">
-            <el-tag>{{ row.accountCount ? row.accountCount : '不限' }}</el-tag>
+            <el-tag>{{ row.accountCount || row.accountCount === 0 ? row.accountCount : '不限' }}</el-tag>
           </template>
         </el-table-column>
         <el-table-column