From ed18c6fd5f1af1246ffb83cf4b9f988d2bc693a0 Mon Sep 17 00:00:00 2001
From: yufei0306 <13417315+yufei0306@user.noreply.gitee.com>
Date: Tue, 2 Apr 2024 16:33:07 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A1=B6=E9=83=A8=E4=B8=80?=
 =?UTF-8?q?=E7=BA=A7=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD=EF=BC=9A=20=20=20?=
 =?UTF-8?q?=20=20=20=20showCategoryMenu:false=20//=20true:=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E5=B1=95=E7=A4=BA=E4=B8=80=E7=BA=A7=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E6=A0=8F=20false:=E5=8F=AA=E6=9C=89=E5=B7=A6=E4=BE=A7=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/CategoryHeader.vue  | 109 ++++++++++++++++++++++
 src/layout/components/Menu/src/Menu.vue   |  22 ++++-
 src/layout/components/useRenderLayout.tsx |   7 ++
 src/store/modules/app.ts                  |  17 +++-
 4 files changed, 152 insertions(+), 3 deletions(-)
 create mode 100644 src/layout/components/CategoryHeader.vue

diff --git a/src/layout/components/CategoryHeader.vue b/src/layout/components/CategoryHeader.vue
new file mode 100644
index 000000000..dc9876512
--- /dev/null
+++ b/src/layout/components/CategoryHeader.vue
@@ -0,0 +1,109 @@
+<script lang="tsx">
+import { defineComponent, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAppStore } from '@/store/modules/app'
+import { isUrl } from '@/utils/is'
+import { pathResolve } from '@/utils/routerHelper'
+import type { RouteMeta } from 'vue-router'
+import { ElMenu, ElMenuItem } from 'element-plus'
+import { usePermissionStore } from '@/store/modules/permission'
+import { hasOneShowingChild } from '@/layout/components/Menu/src/helper'
+import { useRenderMenuTitle } from '@/layout/components/Menu/src/components/useRenderMenuTitle'
+// 头部工具
+import { useDesign } from '@/hooks/web/useDesign'
+const { getPrefixCls, variables } = useDesign()
+const appStore = useAppStore()
+const layout = computed(() => appStore.getLayout)
+
+const prefixCls = getPrefixCls('tool-header')
+const permissionStore = usePermissionStore()
+const routers = computed(() =>
+      unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
+)
+
+const getPath = (route) => {
+  let routePath = route.path
+  if(routePath.startsWith('/')){
+    routePath =  route.path
+  }else{
+    routePath =  '/'+route.path
+  }
+  if(route.redirect){
+    return route.redirect
+  }else if(route.children){
+    return routePath+getPath(route.children[0])
+  }else{
+    return routePath
+  }
+}
+
+export default defineComponent({
+  name: 'CategoryHeader',
+  setup() {
+    console.log('useRouter()',useRouter())
+    const { push } = useRouter()
+    // backgroundColor="var(--left-menu-bg-color)"
+    // textColor="var(--left-menu-text-color)"
+    return () => (
+      <div
+        id={`${variables.namespace}-tool-header`}
+        class={[
+          prefixCls,
+          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
+          'dark:bg-[var(--el-bg-color)]'
+        ]}
+      >
+      <ElMenu style="width:100%"
+          mode="horizontal"
+          backgroundColor="white"
+          textColor="var(--left-menu-bg-color)"
+          activeTextColor="var(--left-menu-text-active-color)"
+        >
+        {{
+            default: () => {
+              const { renderMenuTitle } = useRenderMenuTitle()
+              const categoryRouters =  unref(routers).filter(item=>item.meta.hidden!=true&&item.path!='/')
+              console.log('categoryRouters==',categoryRouters)
+              {/* default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta) */}
+              return categoryRouters.map((v) => {
+                const meta = (v.meta ?? {}) as RouteMeta
+                const { onlyOneChild } = hasOneShowingChild(v.children, v)
+                const fullPath = isUrl(v.path) ? v.path : pathResolve('/', v.path) // getAllParentPath<AppRouteRecordRaw>(allRouters, v.path).join('/')
+
+                return (
+                  <ElMenuItem index={fullPath} onClick={()=>{
+                    console.log(v)
+                    appStore.setCategoryRoutePath(v.path)
+                  }}>
+                    {{
+                      default: () => renderMenuTitle(meta.title?meta:onlyOneChild?.meta)
+                    }}
+                  </ElMenuItem>
+                )
+              })
+            }
+        }}
+        </ElMenu>
+      
+      </div>
+    )
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-tool-header;
+
+.#{$prefix-cls} {
+  transition: left var(--transition-time-02);
+}
+
+::v-deep(.el-menu--horizontal>.el-menu-item){
+    border-radius: 5px;
+    height: 40px;
+    margin-right: 10px;
+    background: linear-gradient(to top left,var(--left-menu-bg-color),var(--left-menu-text-color));
+}
+
+</style>
+
diff --git a/src/layout/components/Menu/src/Menu.vue b/src/layout/components/Menu/src/Menu.vue
index 9033616fe..c6880f299 100644
--- a/src/layout/components/Menu/src/Menu.vue
+++ b/src/layout/components/Menu/src/Menu.vue
@@ -45,6 +45,26 @@ export default defineComponent({
       unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
     )
 
+    const categoryRoutes = computed(() => {
+      const allRoutes = unref(layout) === 'cutMenu' ? permissionStore.getMenuTabRouters : permissionStore.getRouters
+      const categoryPath = appStore.getCategoryRoutePath
+      let findRoutes = allRoutes.find(item=>!item.meta.hidden&&item.path === categoryPath)
+      if(findRoutes){
+        findRoutes =  JSON.parse(JSON.stringify(findRoutes))
+        findRoutes?.children?.forEach(item => {
+          item.path = findRoutes?.path+'/'+item.path
+        });
+      }
+      let homeRoute = allRoutes.find(item=>!item.meta.hidden&&item.path === '/')
+      if(categoryPath!=homeRoute?.path&&homeRoute){
+        homeRoute =  JSON.parse(JSON.stringify(homeRoute))
+        homeRoute?.children?.forEach(item => {
+          item.path = homeRoute?.path+item.path
+        });
+      }
+      return categoryPath!=homeRoute?.path?[...homeRoute?.children||[],...findRoutes?.children||[]]:[...findRoutes?.children||[]]||homeRoute||[]
+    })
+
     const collapse = computed(() => appStore.getCollapse)
 
     const uniqueOpened = computed(() => appStore.getUniqueOpened)
@@ -95,7 +115,7 @@ export default defineComponent({
           {{
             default: () => {
               const { renderMenuItem } = useRenderMenuItem(unref(menuMode))
-              return renderMenuItem(unref(routers))
+              return appStore.getShowCategoryMenu?renderMenuItem(unref(categoryRoutes)):renderMenuItem(unref(routers))
             }
           }}
         </ElMenu>
diff --git a/src/layout/components/useRenderLayout.tsx b/src/layout/components/useRenderLayout.tsx
index 2c5ae80d5..4d9ea8335 100644
--- a/src/layout/components/useRenderLayout.tsx
+++ b/src/layout/components/useRenderLayout.tsx
@@ -6,6 +6,7 @@ import { TagsView } from '@/layout/components/TagsView'
 import { Logo } from '@/layout/components/Logo'
 import AppView from './AppView.vue'
 import ToolHeader from './ToolHeader.vue'
+import CategoryHeader from './CategoryHeader.vue'
 import { ElScrollbar } from 'element-plus'
 import { useDesign } from '@/hooks/web/useDesign'
 import RouterSearch from '@/components/RouterSearch/index.vue'
@@ -111,6 +112,12 @@ export const useRenderLayout = () => {
               ]}
               style="transition: all var(--transition-time-02);"
             >
+              {appStore.getShowCategoryMenu?(<CategoryHeader class={[
+                  'bg-[var(--top-header-bg-color)]',
+                  {
+                    'layout-border__bottom': !tagsView.value
+                  }
+                ]}></CategoryHeader>):undefined}
               <ToolHeader
                 class={[
                   'bg-[var(--top-header-bg-color)]',
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index 2663e1280..c6ecfdd05 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -36,6 +36,8 @@ interface AppState {
   footer: boolean
   theme: ThemeTypes
   fixedMenu: boolean
+  categoryRoutePath:string
+  showCategoryMenu: boolean
 }
 
 export const useAppStore = defineStore('app', {
@@ -97,7 +99,9 @@ export const useAppStore = defineStore('app', {
         topHeaderHoverColor: '#f6f6f6',
         // 头部边框颜色
         topToolBorderColor: '#eee'
-      }
+      },
+      categoryRoutePath:'',
+      showCategoryMenu:false // true:顶部展示一级菜单栏 false:只有左侧菜单栏
     }
   },
   getters: {
@@ -175,7 +179,13 @@ export const useAppStore = defineStore('app', {
     },
     getFooter(): boolean {
       return this.footer
-    }
+    },
+    getCategoryRoutePath():string{
+      return this.categoryRoutePath
+    },
+    getShowCategoryMenu():boolean {
+      return this.showCategoryMenu
+    },
   },
   actions: {
     setBreadcrumb(breadcrumb: boolean) {
@@ -267,6 +277,9 @@ export const useAppStore = defineStore('app', {
     },
     setFooter(footer: boolean) {
       this.footer = footer
+    },
+    setCategoryRoutePath(path:string){
+      this.categoryRoutePath = path
     }
   }
 })