sfms3.0-ui/src/layout/components/CategoryHeader.vue

<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())
    // backgroundColor="var(--left-menu-bg-color)"
    // textColor="var(--left-menu-text-color)"

    const categoryRouters =  unref(routers).filter(item=>item.meta.hidden!=true&&item.path!='/')
    console.log('categoryRouters==',categoryRouters)
    //默认展开第一行
    const currentPath = useRouter().currentRoute.value.matched[0].path
    console.log('默认数据',currentPath)
    if(currentPath){
      if(currentPath=='/'){
        appStore.setCategoryRoutePath(categoryRouters[0].path)
      }else{
        appStore.setCategoryRoutePath(currentPath)
      }
    }
    const activeMenu = computed(() => {
      return appStore.getCategoryRoutePath
    })
    return () => (
      <div class="category-container" style="width:100%">
      <div class="line"></div>
      <ElMenu  
        defaultActive={unref(activeMenu)}
        id={`${variables.namespace}-tool-header`}
        popperOffset={16}
        class={['categoryheader',
          prefixCls,
          'h-[var(--top-category-height)] relative px-[var(--top-tool-p-x)] flex items-center ',
          'dark:bg-[var(--el-bg-color)]',
          
        ]}
          mode="horizontal"
          backgroundColor="white"
          textColor="var(--left-menu-bg-color)"
          activeTextColor="var(--left-menu-text-active-color)"
        >
        {{
            default: () => {
              const { renderMenuTitle } = useRenderMenuTitle()
              
              {/* 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)
                return (
                  <ElMenuItem index={fullPath} class={{
                    
                  }} onClick={()=>{
                    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);
}
.category-container{
  background-color: transparent;
  position: relative;
  .line{
    position: absolute;
    width: 1px;
    height:20px;
    background: #fff;
    top:calc(50% - 10px);
    left:0;
    z-index: 999;
  }

}
.categoryheader{
  padding-left: 20px;
  background: #0069ef;
  border:1px solid #0069ef;
}


::v-deep(.el-menu-item){
    border-radius: 5px;
    height: 40px;
    margin-right: 10px;
    margin-bottom: 2px;
    // background: rgb(242, 245, 248);
    background-color: hsla(0, 100%, 100%, 0.3);
    color:#fff;
    &:hover{
      background: #fff !important;
      color:#0069ef !important;
    }
    // border: 1px solid #ccc;
}
::v-deep(.el-menu-item.is-active){
  // background: var(--el-menu-hover-bg-color)
  // background: #085cf4;
  color:#0069ef !important;
  background: #fff;
}

</style>