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

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

@@ -44,54 +44,65 @@ onMounted(reload);
 </script>
 
 <template>
-  <Skeleton :loading="showTreeSkeleton" :paragraph="{ rows: 8 }" active>
+  <div :class="$attrs.class">
-    <div class="bg-background flex h-full flex-col overflow-y-auto rounded-lg">
+    <Skeleton
-      <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
+      :loading="showTreeSkeleton"
-      <div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
+      :paragraph="{ rows: 8 }"
-        <InputSearch
+      active
-          v-model:value="searchValue"
+      class="p-[8px]"
-          placeholder="Search"
+    >
-          size="small"
+      <div
-        >
+        class="bg-background flex h-full flex-col overflow-y-auto rounded-lg"
-          <template #enterButton>
+      >
-            <a-button @click="reload">
+        <!-- 固定在顶部 必须加上bg-background背景色 否则会产生'穿透'效果 -->
-              <SyncOutlined class="text-primary" />
+        <div class="bg-background z-100 sticky left-0 top-0 p-[8px]">
-            </a-button>
+          <InputSearch
-          </template>
+            v-model:value="searchValue"
-        </InputSearch>
+            placeholder="Search"
-      </div>
+            size="small"
-      <div class="px-[8px]">
+          >
-        <Tree
+            <template #enterButton>
-          v-bind="$attrs"
+              <a-button @click="reload">
-          v-if="deptTreeArray.length > 0"
+                <SyncOutlined class="text-primary" />
-          v-model:selected-keys="selectDeptId"
+              </a-button>
-          :class="$attrs.class"
+            </template>
-          :field-names="{ title: 'label', key: 'id' }"
+          </InputSearch>
-          :show-line="{ showLeafIcon: false }"
+        </div>
-          :tree-data="deptTreeArray"
+        <div class="h-full overflow-x-hidden px-[8px]">
-          :virtual="false"
+          <Tree
-          default-expand-all
+            v-bind="$attrs"
-          @select="$emit('select')"
+            v-if="deptTreeArray.length > 0"
-        >
+            v-model:selected-keys="selectDeptId"
-          <template #title="{ label }">
+            :class="$attrs.class"
-            <span v-if="label.indexOf(searchValue) > -1">
+            :field-names="{ title: 'label', key: 'id' }"
-              {{ label.substring(0, label.indexOf(searchValue)) }}
+            :show-line="{ showLeafIcon: false }"
-              <span style="color: #f50">{{ searchValue }}</span>
+            :tree-data="deptTreeArray"
-              {{
+            :virtual="false"
-                label.substring(label.indexOf(searchValue) + searchValue.length)
+            default-expand-all
-              }}
+            @select="$emit('select')"
-            </span>
+          >
-            <span v-else>{{ label }}</span>
+            <template #title="{ label }">
-          </template>
+              <span v-if="label.indexOf(searchValue) > -1">
-        </Tree>
+                {{ label.substring(0, label.indexOf(searchValue)) }}
-        <!-- 仅本人数据权限 可以考虑直接不显示 -->
+                <span style="color: #f50">{{ searchValue }}</span>
-        <div v-else class="mt-5">
+                {{
-          <Empty
+                  label.substring(
-            :image="Empty.PRESENTED_IMAGE_SIMPLE"
+                    label.indexOf(searchValue) + searchValue.length,
-            description="无部门数据"
+                  )
-          />
+                }}
+              </span>
+              <span v-else>{{ label }}</span>
+            </template>
+          </Tree>
+          <!-- 仅本人数据权限 可以考虑直接不显示 -->
+          <div v-else class="mt-5">
+            <Empty
+              :image="Empty.PRESENTED_IMAGE_SIMPLE"
+              description="无部门数据"
+            />
+          </div>
         </div>
       </div>
-    </div>
+    </Skeleton>
-  </Skeleton>
+  </div>
 </template>