UI样式第一次优化

web-admin/src/hooks/core/useLayoutHeight.ts

@@ -84,22 +84,25 @@ export function useLayoutHeight(options: LayoutHeightOptions = {}) {
  * ```
  */
 export function useAutoLayoutHeight(
-  headerIds: string[] = ['app-header', 'app-content-header'],
+  headerIds: string[] = ['app-header', 'app-worktab', 'app-content-header'],
   options: LayoutHeightOptions = {}
 ) {
   const { extraSpacing = 15, updateCssVar = true, cssVarName = '--art-full-height' } = options
 
   // 创建元素引用
   const headerRef = ref<HTMLElement>()
+  const worktabRef = ref<HTMLElement>()
   const contentHeaderRef = ref<HTMLElement>()
 
   // 使用 VueUse 自动监听元素尺寸变化
   const { height: headerHeight } = useElementSize(headerRef)
+  const { height: worktabHeight } = useElementSize(worktabRef)
   const { height: contentHeaderHeight } = useElementSize(contentHeaderRef)
 
   // 计算容器最小高度（响应式）
   const containerMinHeight = computed(() => {
-    const totalHeight = headerHeight.value + contentHeaderHeight.value + extraSpacing
+    const totalHeight =
+      headerHeight.value + worktabHeight.value + contentHeaderHeight.value + extraSpacing
     return `calc(100vh - ${totalHeight}px)`
   })
 
@@ -121,11 +124,15 @@ export function useAutoLayoutHeight(
       // 使用 nextTick 确保 DOM 完全渲染
       requestAnimationFrame(() => {
         const header = document.getElementById(headerIds[0])
-        const contentHeader = document.getElementById(headerIds[1])
+        const worktab = document.getElementById(headerIds[1])
+        const contentHeader = document.getElementById(headerIds[2])
 
         if (header) {
           headerRef.value = header
         }
+        if (worktab) {
+          worktabRef.value = worktab
+        }
         if (contentHeader) {
           contentHeaderRef.value = contentHeader
         }
@@ -138,10 +145,14 @@ export function useAutoLayoutHeight(
     containerMinHeight,
     /** 头部元素引用 */
     headerRef,
+    /** 工作台标签栏元素引用 */
+    worktabRef,
     /** 内容头部元素引用 */
     contentHeaderRef,
     /** 头部高度（响应式） */
     headerHeight,
+    /** 工作台标签栏高度（响应式） */
+    worktabHeight,
     /** 内容头部高度（响应式） */
     contentHeaderHeight
   }