头部菜单样式

src/layout/components/CategoryHeader.vue

@@ -49,7 +49,7 @@ export default defineComponent({
         id={`${variables.namespace}-tool-header`}
         class={[
           prefixCls,
-          'h-[var(--top-tool-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
+          'h-[var(--top-category-height)] relative px-[var(--top-tool-p-x)] flex items-center justify-between',
           'dark:bg-[var(--el-bg-color)]'
         ]}
       >
@@ -64,6 +64,12 @@ export default defineComponent({
               const { renderMenuTitle } = useRenderMenuTitle()
               const categoryRouters =  unref(routers).filter(item=>item.meta.hidden!=true&&item.path!='/')
               console.log('categoryRouters==',categoryRouters)
+              //默认展开第一行
+              if(categoryRouters.length>0){
+                appStore.setCategoryRoutePath(categoryRouters[0].path)
+              }
+              
+
               {/* default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta) */}
               return categoryRouters.map((v) => {
                 const meta = (v.meta ?? {}) as RouteMeta

src/layout/components/useRenderLayout.tsx

@@ -78,7 +78,7 @@ export const useRenderLayout = () => {
         <div
           class={[
             `${prefixCls}-content`,
-            'absolute top-0 h-[100%]',
+            'absolute top-[var(--top-category-height)] h-[calc(100%-var(--top-category-height))]',
             {
               'w-[calc(100%-var(--left-menu-min-width))] left-[var(--left-menu-min-width)]':
                 collapse.value && !mobile.value && !mobile.value,
@@ -94,7 +94,7 @@ export const useRenderLayout = () => {
             class={[
               `${prefixCls}-content-scrollbar`,
               {
-                '!h-[calc(100%-var(--top-tool-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
+                '!h-[calc(100%-var(--top-tool-height)-var(--top-category-height)-var(--tags-view-height))] mt-[calc(var(--top-tool-height)+var(--tags-view-height))]':
                   fixedHeader.value
               }
             ]}

src/styles/var.css

@@ -32,6 +32,7 @@
   --top-header-hover-color: #f6f6f6;
 
   --top-tool-height: var(--logo-height);
+  --top-category-height: var(--logo-height);
 
   --top-tool-p-x: 0;