feat: ns-tree-api补充粘性定位

lib/component/tree/props.ts

@@ -39,6 +39,7 @@ export const treeProps = {
   defaultExpandAll: PropTypes.bool.def(true),
   resultField: PropTypes.string.def('data'),
   header: PropTypes.object,
+  isSticky: PropTypes.bool.def(true),
   transform: {
     type: Function,
     default: (data: any) => data,

lib/component/tree/tree-api.vue

@@ -1,11 +1,13 @@
 <template>
   <a-spin :spinning="treeState.loading">
-    <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 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>
     <div>
       <ns-tree v-if="treeData?.length" v-bind="getBindValue" v-model:selectedKeys="selectedKeys">
@@ -49,6 +51,9 @@
       ...props.formConfig,
     };
   });
+  const isSticky: any = computed(() => {
+    return props.isSticky ? 'sticky' : 'static';
+  });
   const formFinish = debounce((data: object) => {
     getData(data);
   }, 200);
@@ -87,26 +92,37 @@
   getData();
 </script>
 <style lang="less" scoped>
+  @gap: 16px;
   :deep(.ant-form-item) {
-    margin-bottom: 16px;
+    margin-bottom: @gap;
   }
 
   :deep(.ns-form::after) {
     display: none;
   }
+  .ns-tree-form {
+    position: v-bind(isSticky);
+    top: 0;
+    background-color: @white;
+    z-index: 2;
+    & ~ div {
+      padding: 0 @gap !important;
+    }
+  }
 
   .ns-tree-title {
     font-weight: bold;
     user-select: text;
-    padding: 16px;
-    margin-bottom: 16px;
+    padding: @gap;
+    margin-bottom: @gap;
     padding-bottom: 10px;
     border-bottom: 1px solid #e9e9e9;
+
     > span {
       padding-left: 6px;
     }
     & ~ div {
-      padding: 0 16px !important;
+      padding: 0 @gap !important;
     }
   }
 </style>