chore: 部门面板骨架屏加载效果

apps/web-antd/src/views/system/user/dept-tree.vue

@@ -44,8 +44,16 @@ onMounted(reload);
 </script>
 
 <template>
-  <Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active>
-    <div class="bg-background flex h-full flex-col overflow-y-auto rounded-lg">
+  <div :class="$attrs.class">
+    <Skeleton
+      :loading="showTreeSkeleton"
+      :paragraph="{ rows: 8 }"
+      active
+      class="p-[8px]"
+    >
+      <div
+        class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
+      >
         <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
         <div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
           <InputSearch
@@ -60,7 +68,7 @@ onMounted(reload);
             </template>
           </InputSearch>
         </div>
-      <div class="px-[8px]">
+        <div class="h-full overflow-x-hidden px-[8px]">
           <Tree
             v-bind="$attrs"
             v-if="deptTreeArray.length > 0"
@@ -78,7 +86,9 @@ onMounted(reload);
                 {{ label.substring(0, label.indexOf(searchValue)) }}
                 <span style="color: #f50">{{ searchValue }}</span>
                 {{
-                label.substring(label.indexOf(searchValue) + searchValue.length)
+                  label.substring(
+                    label.indexOf(searchValue) + searchValue.length,
+                  )
                 }}
               </span>
               <span v-else>{{ label }}</span>
@@ -94,4 +104,5 @@ onMounted(reload);
         </div>
       </div>
     </Skeleton>
+  </div>
 </template>