feat: 树loading样式调整

lib/component/tree/tree-api.vue

@@ -1,25 +1,26 @@
 <template>
-  <a-spin :spinning="treeState.loading">
-    <div class="ns-tree-form">
-      <div v-if="header" class="ns-tree-title">
-        <ns-icon :name="header.icon" size="14" />
-        <span>{{ header.title }}</span>
-      </div>
-      <div v-if="!formConfig?.schema">
-        <ns-form ref="formElRef" v-bind="formConfig" :model="formModel" @finish="formFinish" />
-      </div>
+  <div class="ns-tree-form">
+    <div v-show="header" class="ns-tree-title">
+      <ns-icon :name="header.icon" size="14" />
+      <span>{{ header.title }}</span>
     </div>
-    <div>
+    <div v-show="!formConfig?.schema">
+      <ns-form ref="formElRef" v-bind="formConfig" :model="formModel" @finish="formFinish" />
+    </div>
+  </div>
+  <a-spin :spinning="treeState.loading">
+    <div style="min-height: 300px">
       <ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
         <template #[item]="data" v-for="(item, index) in Object.keys($slots)" :key="index">
           <slot :name="item" v-bind="data || {}"></slot>
         </template>
       </ns-tree>
+      <!-- <a-empty v-if="!treeData?.length" /> -->
     </div>
   </a-spin>
 </template>
 <script lang="ts" setup>
-  import { computed, reactive, ref, unref, useAttrs } from 'vue';
+  import { computed, nextTick, reactive, ref, unref, useAttrs } from 'vue';
   import { TreeDataItem } from 'ant-design-vue/es/tree/Tree';
   import { useApi } from '/nerv-lib/use/use-api';
   import { AxiosRequestConfig } from 'axios';
@@ -27,14 +28,13 @@
   import { useRoute } from 'vue-router';
   import { debounce } from 'lodash-es';
   import { treeProps, treeFormProps } from '/nerv-lib/component/tree/props';
-  const formElRef = ref();
+
   defineOptions({
     name: 'NsTreeApi',
   });
+
+  const formElRef = ref();
   const props = defineProps(treeProps);
-
-  console.log(props);
-
   const treeData = ref<TreeDataItem[]>([]);
   const selectedKeys = ref(props.selectedKeys || []);
   const { httpRequest } = useApi();
@@ -82,7 +82,6 @@
     })
       .then((res) => {
         treeData.value = transform(get(res, resultField));
-        console.log(treeData.value, 'treeData.value');
       })
       .finally(() => {
         setLoading(false);
@@ -123,6 +122,7 @@
     }
     & ~ div {
       padding: 0 @gap !important;
+      width: 100%;
     }
   }
 </style>

lib/saas/view/system/layout/breadcrumb.vue

@@ -87,7 +87,7 @@
     width: 100%;
     padding: 0 @ns-gap;
     min-height: @ns-nav-shutters-height;
-    background: #ffffff;
+    background: @white;
     display: flex;
     align-items: center;
     position: fixed;

lib/saas/view/system/layout/tags.vue

@@ -299,7 +299,7 @@
     // padding: 0 12px;
     min-height: @ns-nav-shutters-height;
     height: @ns-nav-shutters-height;
-    background: #ffffff;
+    background: @white;
     display: flex;
     align-items: center;
     position: fixed;
@@ -312,7 +312,7 @@
     // padding: 0 12px;
     min-height: @ns-nav-shutters-height;
     height: @ns-nav-shutters-height;
-    background: #ffffff;
+    background: @white;
     display: flex;
     align-items: center;
     position: fixed;