feature: 添加混合模式菜单

jsxiaosi · Jun 19, 2022 · 295f242 · 295f242
1 parent 8ac8010
commit 295f242
Show file tree

Hide file tree

Showing 19 changed files with 315 additions and 164 deletions.
diff --git a/index.html b/index.html
@@ -10,6 +10,9 @@
     <link rel="apple-touch-icon" href="/pwa/apple-touch-icon.png" sizes="180x180" />
     <link rel="mask-icon" href="/pwa/favicon.svg" color="#FFFFFF" />
     <meta name="theme-color" content="#ffffff" />
+    <script>
+      window.process = {};
+    </script>
   </head>
 
   <body>

diff --git a/package.json b/package.json
@@ -76,6 +76,7 @@
     "http-server": "^14.1.1",
     "husky": "^8.0.1",
     "lint-staged": "^13.0.1",
+    "path": "^0.12.7",
     "postcss-html": "^1.4.1",
     "postcss-import": "^14.1.0",
     "prettier": "2.6.2",

diff --git a/src/hooks/userAppWindow.ts b/src/hooks/userAppWindow.ts
@@ -1,10 +1,11 @@
 // import { useStore } from '@/store'
 import { computed } from 'vue';
 import { useAppStore } from '@/store/modules/app';
+import { appConfig } from '@/store/types';
 
 export const getAppCollapseMenu = () => {
   // const store = useStore()
   const appStore = useAppStore();
-  const appConfigMode = computed(() => appStore.getAppConfigMode);
+  const appConfigMode = computed<appConfig>(() => appStore.getAppConfigMode);
   return { appConfigMode };
 };
diff --git a/src/layouts/pageLayouts/components/AppMain/index.vue b/src/layouts/pageLayouts/components/AppMain/index.vue
@@ -22,8 +22,8 @@
   .app-main {
     position: relative;
     width: 100%;
-    height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight});
-    // min-height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight});
+    height: calc(100vh - #{$navBarHeight+$TabsPageHeight});
+    // min-height: calc(100vh - #{$navBarHeight+$TabsPageHeight});
     overflow: auto;
     padding: 20px;
     background-color: #{$app-main-bg-color};

diff --git a/src/layouts/pageLayouts/components/Breadcrumb/index.vue b/src/layouts/pageLayouts/components/Breadcrumb/index.vue
@@ -1,28 +1,29 @@
 <template>
   <div class="breadcrumb">
-    <!-- <i
-			class="breadcrumb-icon"
-			:class="[isCollapseMenu ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
-			@click="handerShowElmenu"
-		></i>-->
     <SvgIcon
       class="breadcrumb-fold"
       :class="{ 'breadcrumb-unfold': isAppConfigMode.collapseMenu }"
       name="fold"
       color="#e3e3e3"
       @click="handerShowElmenu"
     ></SvgIcon>
-    <el-breadcrumb class="app-breadcrumb" separator="/">
-      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-        <span
-          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-          class="no-redirect"
-          >{{ t(`${item.meta.title}`) }}</span
-        >
-        <a v-else class="redirect" @click.prevent="handleLink(item)">
-          {{ t(`${item.meta.title}`) }}
-        </a>
-      </el-breadcrumb-item>
+    <el-breadcrumb
+      v-show="appConfigMode.sidebarMode === 'vertical'"
+      class="app-breadcrumb"
+      separator="/"
+    >
+      <transition-group name="breadcrumb">
+        <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+          <span
+            v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+            class="no-redirect"
+            >{{ t(`${item.meta.title}`) }}</span
+          >
+          <a v-else class="redirect" @click.prevent="handleLink(item)">
+            {{ t(`${item.meta.title}`) }}
+          </a>
+        </el-breadcrumb-item>
+      </transition-group>
     </el-breadcrumb>
   </div>
 </template>
@@ -103,10 +104,6 @@
     }
 
     .app-breadcrumb.el-breadcrumb {
-      // display: inline-block;
-      // font-size: 14px;
-      line-height: #{$BreadcrumbHeight};
-      // margin-left: 8px;
       .redirect {
         color: $BreadcrumbText;
       }

diff --git a/src/layouts/pageLayouts/components/Navbart/index.vue b/src/layouts/pageLayouts/components/Navbart/index.vue
@@ -1,14 +1,23 @@
 <template>
   <div class="navbar">
     <div class="navbar-left">
-      <SvgIcon class="logo" name="Vue" @click="drawer = true"></SvgIcon>
+      <Breadcrumb v-if="appConfigMode.sidebarMode !== 'horizontal'" />
+      <div v-else class="app-logo">
+        <SvgIcon name="Vue"></SvgIcon>
+        <span class="name">xiaosiAdmin</span>
+      </div>
     </div>
     <div class="navbar-center">
       <Sidebar
         v-if="appConfigMode.sidebarMode === 'horizontal'"
         class="sidebar-horizontal"
         mode="horizontal"
       />
+      <MinSidebar
+        v-if="appConfigMode.sidebarMode === 'blend'"
+        class="sidebar-horizontal"
+        mode="horizontal"
+      />
     </div>
     <div class="navbar-right">
       <AppTheme></AppTheme>
@@ -18,26 +27,16 @@
     </div>
 
     <Setting v-model:modelValue="drawer"></Setting>
-
-    <!-- <el-select v-model="value" placeholder="请选择" @change="toggleTheme">
-			<el-option
-				v-for="item in options"
-				:key="item.value"
-				:label="item.label"
-				:value="item.value"
-			>
-			</el-option>
-		</el-select>-->
-    <!-- <div class="pattern">
-
-		</div>-->
   </div>
 </template>
 
 <script setup lang="ts">
   // import { ref } from 'vue'
   import Sidebar from '../../components/Sidebar/index.vue';
+  import MinSidebar from '../../components/Sidebar/MinSidebar.vue';
   import Setting from '../../components/Seting/index.vue';
+  import Breadcrumb from '../../components/Breadcrumb/index.vue';
+
   import { AppLocale, AppTheme, AppAccount } from '@/components/Application';
 
   import SvgIcon from '@/components/SvgIcon/index.vue';
@@ -47,56 +46,33 @@
   const drawer = ref(false);
 
   const { appConfigMode } = getAppCollapseMenu();
-
-  // const options = ref([
-  // 	{ name: '123', value: 'variables-theme-day' },
-  // 	{ name: '456', value: 'variables-theme-dark' },
-  // ])
-
-  // const value = ref()
-
-  // const toggleTheme = (scopeName = 'theme-default') => {
-  // 	document.documentElement.className = scopeName
-  // }
 </script>
 
 <style lang="scss" scoped>
   .navbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1002;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
+    // margin-left: #{$sideBarWidth};
     height: #{$navBarHeight};
     padding: 0 20px;
     background-color: $navBarColor;
     border-bottom: 1px solid $navBarBorderBottomColor;
     box-shadow: 1px 0 20px rgb(0 0 0 / 8%);
 
     .navbar-left {
-      .logo {
-        font-size: 38px;
-      }
-      // flex: 1;
-      // width: 200px;
-      // height: 100%;
     }
 
     .navbar-center {
-      width: 100%;
       height: 100%;
-      padding: 0 20px;
-      // .sidebar-horizontal {
-      //   height: 54px;
-      // }
+      min-width: 0;
+      flex: 1;
     }
 
     .navbar-right {
       display: flex;
-      flex: 1;
+      // flex: 1;
       align-items: center;
 
       .icon {

diff --git a/src/layouts/pageLayouts/components/Seting/index.vue b/src/layouts/pageLayouts/components/Seting/index.vue
@@ -3,22 +3,16 @@
     <div class="drawer-content">
       <div class="layout_seting">
         <div class="sidebar_seting">
-          <el-tooltip content="左侧菜单模式" placement="bottom">
+          <el-tooltip
+            v-for="item in sidebarSeting"
+            :key="item.value"
+            :content="item.label"
+            placement="bottom"
+          >
             <div
               class="sidebar_mode"
-              :class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === 'vertical' }"
-              @click="handerShowElmenu('vertical')"
-            >
-              <div></div>
-              <div></div>
-            </div>
-          </el-tooltip>
-
-          <el-tooltip content="顶部菜单模式" placement="bottom">
-            <div
-              class="sidebar_mode"
-              :class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === 'horizontal' }"
-              @click="handerShowElmenu('horizontal')"
+              :class="{ 'sidebar_mode-select': appConfigMode.sidebarMode === item.value }"
+              @click="handerShowElmenu(item.value)"
             >
               <div></div>
               <div></div>
@@ -34,6 +28,7 @@
   import { getAppCollapseMenu } from '@/hooks/userAppWindow';
   import { watch, ref } from 'vue';
   import { useAppStore } from '@/store/modules/app';
+  import { SidebarMode } from '@/store/types';
 
   const props = defineProps({
     modelValue: {
@@ -55,10 +50,24 @@
 
   const { appConfigMode } = getAppCollapseMenu();
   const isAppConfigMode = ref(appConfigMode.value);
+  const sidebarSeting: { label: string; value: SidebarMode }[] = [
+    {
+      label: '左侧菜单模式',
+      value: 'vertical',
+    },
+    {
+      label: '顶部菜单模式',
+      value: 'horizontal',
+    },
+    {
+      label: '混合菜单模式',
+      value: 'blend',
+    },
+  ];
 
   const appStore = useAppStore();
   // 折叠菜单事件
-  const handerShowElmenu = (vale: string) => {
+  const handerShowElmenu = (vale: SidebarMode) => {
     isAppConfigMode.value.sidebarMode = vale;
     appStore.setAppConfigMode(isAppConfigMode.value);
   };
@@ -117,6 +126,26 @@
               }
             }
           }
+
+          &:nth-child(3) {
+            div {
+              &:nth-child(1) {
+                width: 30%;
+                height: 100%;
+                background: #fff;
+              }
+
+              &:nth-child(2) {
+                position: absolute;
+                top: 0;
+                right: 0;
+                width: 100%;
+                height: 30%;
+                background: #409eff;
+                box-shadow: 0 0 1px #888;
+              }
+            }
+          }
         }
       }
     }

diff --git a/src/layouts/pageLayouts/components/Sidebar/MinSidebar.vue b/src/layouts/pageLayouts/components/Sidebar/MinSidebar.vue
@@ -0,0 +1,38 @@
+<template>
+  <el-menu
+    ref="menu"
+    :default-active="activeMenyu"
+    :active="activeMenyu"
+    class="horizontal-header-menu"
+    mode="horizontal"
+    router
+  >
+    <app-link
+      v-for="menusRoute in usePermissionStoreHook().wholeMenus"
+      :key="menusRoute.path"
+      :to="menusRoute.path"
+    >
+      <el-menu-item :index="menusRoute.path">
+        <item
+          class-name="menu-item-svg"
+          :icon="menusRoute.meta && menusRoute.meta.icon"
+          :title="menusRoute.meta?.title"
+        />
+      </el-menu-item>
+    </app-link>
+  </el-menu>
+</template>
+<script setup lang="ts">
+  import Item from './Item.vue';
+  import AppLink from './Link.vue';
+  import { usePermissionStoreHook } from '@/store/modules/permission';
+  import { computed } from 'vue';
+  import { useRoute } from 'vue-router';
+
+  const route = useRoute();
+
+  const activeMenyu = computed<string>(() => {
+    const { path } = route;
+    return '/' + path.split('/')[1];
+  });
+</script>
diff --git a/src/layouts/pageLayouts/components/Sidebar/SidebarItem.vue b/src/layouts/pageLayouts/components/Sidebar/SidebarItem.vue
@@ -15,7 +15,7 @@
           <item
             class-name="menu-item-svg"
             :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
-            :title="onlyOneChild.meta.title"
+            :title="onlyOneChild.meta.title || (item.meta && item.meta.title)"
           />
         </el-menu-item>
       </app-link>
@@ -43,6 +43,7 @@
 </template>
 
 <script setup lang="ts">
+  import path from 'path';
   import { PropType, ref } from 'vue';
   import { isExternal } from '@/utils/validate';
   import { AppRouteRecordRaw } from '#/route';
@@ -100,7 +101,7 @@
     if (isExternal(props.basePath)) {
       return props.basePath;
     }
-    return `${props.basePath}${routePath ? '/' + routePath : routePath}`;
+    return path.resolve(props.basePath, routePath);
   };
 </script>