feat(popeditor): [popeditor] Adapt popeditor component xdesign theme (#1973)

* feat(popeditor): [popeditor] Adapt popeditor component xdesign theme

* fix(popeditor): [popeditor] Test case modification

* fix(popeditor): [popeditor] Test case modification

examples/sites/demos/pc/app/popeditor/multi-composition-api.vue

@@ -6,6 +6,7 @@
       show-history
       text-field="name"
       value-field="id"
+      :conditions="conditions"
       :multi="true"
       value-split="@"
       text-split="@"
@@ -81,6 +82,11 @@ const dataset = [
   }
 ]
 
+const conditions = ref([
+  { label: '公司名', field: 'name' },
+  { label: '城市', field: 'city' }
+])
+
 const value = ref('')
 const gridOp = ref({
   columns: [

examples/sites/demos/pc/app/popeditor/multi.vue

@@ -6,6 +6,7 @@
       show-history
       text-field="name"
       value-field="id"
+      :conditions="conditions"
       :multi="true"
       value-split="@"
       text-split="@"
@@ -110,7 +111,11 @@ export default {
           }
         ],
         data: dataset
-      }
+      },
+      conditions: [
+        { label: '公司名', field: 'name' },
+        { label: '城市', field: 'city' }
+      ]
     }
   }
 }

examples/sites/demos/pc/app/popeditor/pager-composition-api.vue

@@ -39,6 +39,7 @@ const gridOp = ref({
   ],
   data: [],
   pagerOp: {
+    size: 'mini',
     pageSize: 4,
     pageSizes: [4, 5, 10],
     total: 10,

examples/sites/demos/pc/app/popeditor/pager.vue

@@ -44,6 +44,7 @@ export default {
         ],
         data: [],
         pagerOp: {
+          size: 'mini',
           pageSize: 4,
           pageSizes: [4, 5, 10],
           total: 10,

examples/sites/demos/pc/app/popeditor/resize.spec.ts

@@ -4,14 +4,17 @@ test('PopEditor 全屏展示', async ({ page }) => {
   page.on('pageerror', (exception) => expect(exception).toBeNull())
   await page.goto('popeditor#resize')
 
-  const preview = page.locator('#resize')
-  const textBox = preview.getByRole('textbox')
+  const wrap = page.locator('#resize')
+  const popeditor = wrap.locator('.tiny-popeditor')
   const dialogBox = page.locator('.tiny-dialog-box')
-  const resizeBtn = dialogBox.getByRole('button', { name: 'Resize' })
+  const resizeSvg = dialogBox.locator('.tiny-dialog-box__resize')
 
-  await textBox.click()
+  await popeditor.click()
+  await page.waitForTimeout(1000)
   await expect(dialogBox).toBeVisible()
   await expect(dialogBox).not.toHaveClass(/is-fullscreen/)
-  await resizeBtn.click()
+  await expect(resizeSvg).toBeVisible()
+  await resizeSvg.click()
+  await page.waitForTimeout(500)
   await expect(dialogBox).toHaveClass(/is-fullscreen/)
 })

examples/sites/demos/pc/app/popeditor/slot-composition-api.vue

@@ -1,17 +1,17 @@
 <template>
   <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id" :conditions="conditions">
     <template #search="slotScope">
-      <div class="item" style="text-align: center">
-        公司名：<input type="text" v-model="params.name" /> 城市：<input type="text" v-model="params.city" />
+      <div class="list">
+        <div class="item">
+          <span>公司名：</span>{{ params.name }}
+          <tiny-input type="text" v-model="params.name"></tiny-input>
+        </div>
+        <div class="item">
+          <span> 城市：</span>
+          <tiny-input type="text" v-model="params.city"></tiny-input>
+        </div>
       </div>
-      <div class="item" style="margin-top: 10px; text-align: center">
-        公司名：<tiny-input type="text" v-model="params.name" style="width: 30%"></tiny-input> 城市：<tiny-input
-          type="text"
-          v-model="params.city"
-          style="width: 30%"
-        ></tiny-input>
-      </div>
-      <div class="item" style="margin-top: 10px; text-align: center">
+      <div class="buttons">
         <tiny-button type="primary" @click="slotScope.searchOp.doSearch(params)">Search</tiny-button>
         <tiny-button @click="slotScope.searchOp.doClear(params)">Clear</tiny-button>
       </div>
@@ -120,3 +120,29 @@ const conditions = ref([
   { label: '城市', field: 'city' }
 ])
 </script>
+
+<style lang="less" scoped>
+.tiny-popeditor__dialog-box {
+  .tiny-popeditor-top .list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 24px;
+    line-height: 1.5;
+
+    .item {
+      width: 50%;
+
+      &:nth-child(2n + 1) {
+        padding-right: 16px;
+      }
+    }
+  }
+  .buttons {
+    margin-top: 12px;
+    text-align: right;
+  }
+}
+</style>

examples/sites/demos/pc/app/popeditor/slot.spec.ts

@@ -9,8 +9,10 @@ test('PopEditor 组件查询条件插槽', async ({ page }) => {
   const searchWrap = page.locator('.tiny-dialog-box__body > .tiny-popeditor-top')
   const defaultSearch = searchWrap.locator('.tiny-popeditor__search-lists')
   const slotItem = searchWrap.locator('.item')
+  const buttons = searchWrap.locator('.buttons button')
 
   await textBox.click()
   await expect(defaultSearch).toHaveCount(0)
-  await expect(slotItem).toHaveCount(3)
+  await expect(slotItem).toHaveCount(2)
+  await expect(buttons).toHaveCount(2)
 })

examples/sites/demos/pc/app/popeditor/slot.vue

@@ -1,17 +1,17 @@
 <template>
   <tiny-popeditor v-model="value" :grid-op="gridOp" text-field="name" value-field="id" :conditions="conditions">
     <template #search="slotScope">
-      <div class="item" style="text-align: center">
-        公司名：<input type="text" v-model="params.name" /> 城市：<input type="text" v-model="params.city" />
+      <div class="list">
+        <div class="item">
+          <span>公司名：</span>{{ params.name }}
+          <tiny-input type="text" v-model="params.name"></tiny-input>
+        </div>
+        <div class="item">
+          <span> 城市：</span>
+          <tiny-input type="text" v-model="params.city"></tiny-input>
+        </div>
       </div>
-      <div class="item" style="margin-top: 10px; text-align: center">
-        公司名：<tiny-input type="text" v-model="params.name" style="width: 30%"></tiny-input> 城市：<tiny-input
-          type="text"
-          v-model="params.city"
-          style="width: 30%"
-        ></tiny-input>
-      </div>
-      <div class="item" style="margin-top: 10px; text-align: center">
+      <div class="buttons">
         <tiny-button type="primary" @click="slotScope.searchOp.doSearch(params)">Search</tiny-button>
         <tiny-button @click="slotScope.searchOp.doClear(params)">Clear</tiny-button>
       </div>
@@ -130,3 +130,29 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.tiny-popeditor__dialog-box {
+  .tiny-popeditor-top .list {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-bottom: 24px;
+    line-height: 1.5;
+
+    .item {
+      width: 50%;
+
+      &:nth-child(2n + 1) {
+        padding-right: 16px;
+      }
+    }
+  }
+  .buttons {
+    margin-top: 12px;
+    text-align: right;
+  }
+}
+</style>

examples/sites/demos/pc/app/popeditor/tree-composition-api.vue

@@ -42,7 +42,20 @@ const dataset = [
       {
         id: 5,
         label: 'node1.5',
-        children: [{ id: 51, pId: 5, label: 'node1.5.1' }]
+        children: [
+          { id: 51, pId: 5, label: 'node1.5.1' },
+          { id: 52, pId: 5, label: 'node1.5.2' },
+          { id: 53, pId: 5, label: 'node1.5.3' }
+        ]
+      },
+      {
+        id: 6,
+        label: 'node1.6',
+        children: [
+          { id: 61, pId: 6, label: 'node1.6.1' },
+          { id: 62, pId: 6, label: 'node1.6.2' },
+          { id: 63, pId: 6, label: 'node1.6.3' }
+        ]
       }
     ]
   }
@@ -50,6 +63,8 @@ const dataset = [
 const value = ref('')
 const treeOp = ref({
   data: dataset,
-  checkOnClickNode: true
+  checkOnClickNode: true,
+  showLine: true,
+  highlightQuery: true
 })
 </script>

examples/sites/demos/pc/app/popeditor/tree.vue

@@ -46,7 +46,20 @@ export default {
           {
             id: 5,
             label: 'node1.5',
-            children: [{ id: 51, pId: 5, label: 'node1.5.1' }]
+            children: [
+              { id: 51, pId: 5, label: 'node1.5.1' },
+              { id: 52, pId: 5, label: 'node1.5.2' },
+              { id: 53, pId: 5, label: 'node1.5.3' }
+            ]
+          },
+          {
+            id: 6,
+            label: 'node1.6',
+            children: [
+              { id: 61, pId: 6, label: 'node1.6.1' },
+              { id: 62, pId: 6, label: 'node1.6.2' },
+              { id: 63, pId: 6, label: 'node1.6.3' }
+            ]
           }
         ]
       }
@@ -55,7 +68,9 @@ export default {
       value: '',
       treeOp: {
         data: dataset,
-        checkOnClickNode: true
+        checkOnClickNode: true,
+        showLine: true,
+        highlightQuery: true
       }
     }
   }

packages/design/aurora/index.ts

@@ -15,6 +15,7 @@ import DateRange from './src/date-range'
 import Pager from './src/pager'
 import Wizard from './src/wizard'
 import DialogBox from './src/dialog-box'
+import Popeditor from './src/popeditor'
 import { version } from './package.json'
 
 export default {
@@ -37,6 +38,7 @@ export default {
     DateRange,
     Pager,
     Wizard,
-    DialogBox
+    DialogBox,
+    Popeditor
   }
 }

packages/design/aurora/src/popeditor/index.ts

@@ -0,0 +1,11 @@
+export default {
+  renderless: (props, hooks, { emit }, api) => {
+    const state = api.state
+
+    return {
+      treeWrapperMaxHeight() {
+        state.treeWrapperMaxHeight = 'auto'
+      }
+    }
+  }
+}

packages/design/saas/index.ts

@@ -15,6 +15,7 @@ import Input from './src/input'
 import DateRange from './src/date-range'
 import Pager from './src/pager'
 import DialogBox from './src/dialog-box'
+import Popeditor from './src/popeditor'
 import { version } from './package.json'
 
 export default {
@@ -37,6 +38,7 @@ export default {
     Input,
     DateRange,
     Pager,
-    DialogBox
+    DialogBox,
+    Popeditor
   }
 }

packages/design/saas/src/popeditor/index.ts

@@ -0,0 +1,11 @@
+export default {
+  renderless: (props, hooks, { emit }, api) => {
+    const state = api.state
+
+    return {
+      treeWrapperMaxHeight() {
+        state.treeWrapperMaxHeight = 'auto'
+      }
+    }
+  }
+}

packages/renderless/src/popeditor/index.ts

@@ -377,7 +377,7 @@ export const initDisplay =
   }
 
 export const openDialog =
-  ({ api, props, state, emit }) =>
+  ({ api, props, state, emit, nextTick }) =>
   () => {
     if (state.disabled) {
       return
@@ -390,6 +390,10 @@ export const openDialog =
     state.showContent = true
     emit('popup')
     props.autoLookup && props.alwaysLoad && api.query()
+
+    nextTick(() => {
+      api.computedTreeMaxHeight()
+    })
   }
 
 const localFilter = ({ props, state }) => {
@@ -936,3 +940,13 @@ export const selectedBoxDrag =
       state.selectedValues = values
     }
   }
+
+export const computedTreeMaxHeight =
+  ({ vm, state }) =>
+  () => {
+    const dialogBoxEl = vm.$refs.popeditorDialogBox.$el
+    const searchInputBottom = 20
+    const searchInputHeight = dialogBoxEl.querySelector('.tiny-popeditor__filter-input')?.clientHeight || 0
+
+    state.treeWrapperMaxHeight = `${dialogBoxEl.querySelector('.tiny-dialog-box__body').clientHeight - searchInputHeight - searchInputBottom}px`
+  }

packages/renderless/src/popeditor/vue.ts

@@ -55,7 +55,8 @@ import {
   selectedBoxClear,
   selectedBoxDelete,
   selectedBoxDrag,
-  radioChangeFn
+  radioChangeFn,
+  computedTreeMaxHeight
 } from './index'
 
 export const api = [
@@ -86,7 +87,8 @@ export const api = [
   'selectedBoxClear',
   'selectedBoxDelete',
   'selectedBoxDrag',
-  'radioChangeFn'
+  'radioChangeFn',
+  'computedTreeMaxHeight'
 ]
 
 const initState = ({ reactive, computed, props, api, constants, t, parent, vm }) => {
@@ -130,7 +132,8 @@ const initState = ({ reactive, computed, props, api, constants, t, parent, vm })
     showSuggestPanel: false,
     inputHover: false,
     search: null,
-    closeSuggestPanelInvoker: null
+    closeSuggestPanelInvoker: null,
+    treeWrapperMaxHeight: 'auto'
   })
 
   return state
@@ -155,7 +158,7 @@ const initApi = ({ api, props, state, parent, vm, emit, popper, constants, nextT
     selectedGridSelectAll: selectedGridSelectAll({ constants, props, vm, state }),
     selectedGridSelectChange: selectedGridSelectChange({ constants, props, vm, state }),
     handleReset: handleReset({ api, state, props }),
-    openDialog: openDialog({ api, emit, props, state }),
+    openDialog: openDialog({ api, emit, props, state, nextTick }),
     initDisplay: initDisplay({ api, constants, props, state, nextTick }),
     handleSearch: handleSearch({ api, props, state, vm, constants }),
     computedTreeOp: computedTreeOp({ api, constants }),
@@ -182,7 +185,8 @@ const initApi = ({ api, props, state, parent, vm, emit, popper, constants, nextT
     selectedBoxClear: selectedBoxClear(api),
     selectedBoxDelete: selectedBoxDelete(api),
     selectedBoxDrag: selectedBoxDrag({ props, state }),
-    radioChangeFn: radioChangeFn({ props, api })
+    radioChangeFn: radioChangeFn({ props, api }),
+    computedTreeMaxHeight: computedTreeMaxHeight({ vm, state })
   })
 
   state.search = api.createSearchForm(false)

packages/theme/src/dialog-box/index.less

@@ -125,6 +125,8 @@
     margin-bottom: var(--ti-dialog-box-body-margin-bottom);
     color: var(--ti-dialog-box-body-text-color);
     font-size: var(--ti-dialog-box-body-font-size);
+    overflow: auto;
+    max-height: 65vh;
 
     .@{css-prefix}upload {
       overflow: hidden;

packages/theme/src/popeditor/index.less

@@ -19,10 +19,6 @@
 @dialog-box-prefix-cls: ~'@{css-prefix}dialog-box';
 @svg-prefix-cls: ~'@{css-prefix}svg';
 
-.@{dialog-box-prefix-cls} {
-  .component-css-vars-popeditor();
-}
-
 .@{popeditor-prefix-cls} {
   .component-css-vars-popeditor();
 
@@ -107,12 +103,6 @@
     }
   }
 
-  .@{dialog-box-prefix-cls} {
-    .@{dialog-box-prefix-cls}__body {
-      padding: 8px 8px 0;
-    }
-  }
-
   &-top {
     .@{popeditor-prefix-cls}__search-lists {
       width: 100%;
@@ -135,9 +125,18 @@
         margin-bottom: var(--ti-popeditor-search-item-margin-bottom);
 
         .@{popeditor-prefix-cls}__search-label {
-          text-align: right;
+          text-align: var(--ti-popeditor-search-item-text-align);
           padding-right: 8px;
           font-size: var(--ti-common-font-size-base);
+          width: var(--ti-popeditor-search-item-width);
+        }
+
+        &:nth-child(2n + 1) {
+          padding-right: var(--ti-popeditor-search-item-padding-right);
+        }
+
+        &:nth-child(2n) {
+          padding-left: var(--ti-popeditor-search-item-padding-left);
         }
       }
 
@@ -148,8 +147,9 @@
 
     .@{popeditor-prefix-cls}__search-footer {
       width: 100%;
-      text-align: center;
-      margin: var(--ti-popeditor-search-footer-margin-vertical) var(--ti-popeditor-search-footer-margin-horizontal);
+      text-align: var(--ti-popeditor-search-footer-text-align);
+      margin: var(--ti-popeditor-search-footer-margin-top) var(--ti-popeditor-search-footer-margin-horizontal)
+        var(--ti-popeditor-search-footer-margin-bottom);
     }
   }
 
@@ -159,10 +159,19 @@
     justify-content: space-between;
     align-items: flex-start;
 
+    &__left {
+      padding: var(--ti-popeditor-tabs-body-left-padding-top) var(--ti-popeditor-tabs-body-left-padding-right)
+        var(--ti-popeditor-tabs-body-left-padding-bottom) var(--ti-popeditor-tabs-body-left-padding-left);
+    }
+    
+    &__right {
+      padding: var(--ti-popeditor-tabs-body-right-padding-top) var(--ti-popeditor-tabs-body-right-padding-right)
+        var(--ti-popeditor-tabs-body-right-padding-bottom) var(--ti-popeditor-tabs-body-right-padding-left);
+    }
+
     &__left,
     &__right {
       width: 50%;
-      padding: var(--ti-popeditor-tabs-body-padding-vertical) var(--ti-popeditor-tabs-body-padding-horizontal);
       vertical-align: top;
 
       &.@{popeditor-prefix-cls}-body__radio {
@@ -174,7 +183,7 @@
       .@{popeditor-prefix-cls}__tabs-head {
         white-space: nowrap;
         margin: 0;
-        padding: 0 10px;
+        padding: 0 var(--ti-popeditor-tabs-header-padding-horizontal);
         overflow: hidden;
         height: var(--ti-popeditor-tabs-li-height);
         width: 100%;
@@ -193,7 +202,9 @@
             color: var(--ti-popeditor-tabs-text-color);
             min-width: 90px;
             height: var(--ti-popeditor-tabs-li-height);
-            line-height: var(--ti-popeditor-tabs-li-height);
+            line-height: var(--ti-popeditor-tabs-li-line-height);
+            font-size: var(--ti-popeditor-tabs-font-size);
+            margin-right: var(--ti-popeditor-tabs-li-margin-right);
 
             &.@{popeditor-prefix-cls}__tabs-selected {
               color: var(--ti-popeditor-tabs-selected-text-color);
@@ -210,6 +221,7 @@
             var(--ti-popeditor-tabs-body-item-padding-bottom);
 
           .@{pager-prefix-cls} {
+            padding-top: var(--ti-popeditor-pager-padding-top);
             padding-bottom: 0;
           }
         }
@@ -217,7 +229,34 @@
     }
   }
 
-  &_filter-input {
-    margin-bottom: 20px;
+  &__tree {
+    .@{popeditor-prefix-cls}__filter-input {
+      margin-bottom: 20px;
+
+       .tiny-input__inner {
+        padding-left: var(--ti-popeditor-tree-input-padding-left);
+        padding-right: var(--ti-popeditor-tree-input-padding-right);
+      }
+
+      .tiny-input__prefix {
+        visibility: var(--ti-popeditor-tree-input-prefix-visibility);
+      }
+      .tiny-input__suffix {
+        visibility: var(--ti-popeditor-tree-input-sufffix-visibility);
+      }
+    }
+
+    &-wrapper {
+      overflow: auto;
+    }
+  }
+}
+
+.@{popeditor-prefix-cls}__dialog-box {
+  .component-css-vars-popeditor();
+
+  .@{dialog-box-prefix-cls}__footer {
+    text-align: var(--ti-popeditor-footer-text-align);
+    padding-top: var(--ti-popeditor-footer-padding-top);
   }
 }

packages/theme/src/popeditor/smb-theme.js

@@ -0,0 +1,34 @@
+export const tinyPopeditorSmbTheme = {
+  'ti-popeditor-pager-padding-top': 'var(--ti-common-space-3x)',
+  'ti-popeditor-tabs-body-item-padding-top': 'var(--ti-common-space-4x)',
+  'ti-popeditor-footer-text-align': 'right',
+  'ti-popeditor-footer-padding-top': 'var(--ti-common-space-6x)',
+  'ti-popeditor-tabs-li-padding-horizontal': 'var(--ti-common-space-0)',
+  'ti-popeditor-border-color': 'var(--ti-common-border-color-transparent-8)',
+  'ti-popeditor-tabs-header-padding-horizontal': 'var(--ti-common-space-0)',
+  'ti-popeditor-tabs-body-item-padding-horizontal': 'var(--ti-common-space-0)',
+  'ti-popeditor-search-item-width': '80px',
+  'ti-popeditor-search-item-text-align': 'left',
+  'ti-popeditor-search-item-padding-right': 'var(--ti-common-space-4x)',
+  'ti-popeditor-search-item-padding-left': 'var(--ti-common-space-4x)',
+  'ti-popeditor-search-footer-text-align': 'right',
+  'ti-popeditor-search-item-margin-bottom': 'var(--ti-common-space-6x)',
+  'ti-popeditor-search-footer-margin-top': 'var(--ti-common-space-0)',
+  'ti-popeditor-search-footer-margin-bottom': 'var(--ti-common-space-6x)',
+  'ti-popeditor-tabs-li-height': 'calc(var(--ti-common-size-8x) + 2px)',
+  'ti-popeditor-tabs-li-line-height': 'var(--ti-common-line-height-2)',
+  'ti-popeditor-tabs-li-margin-right': 'var(--ti-common-space-8x)',
+  'ti-popeditor-tabs-font-size': 'var(--ti-common-font-size-2)',
+  'ti-popeditor-tabs-body-left-padding-top': 'var(--ti-common-space-0)',
+  'ti-popeditor-tabs-body-left-padding-right': 'var(--ti-common-space-4x)',
+  'ti-popeditor-tabs-body-left-padding-bottom': 'var(--ti-common-space-0)',
+  'ti-popeditor-tabs-body-left-padding-left': 'var(--ti-common-space-0)',
+  'ti-popeditor-tabs-body-right-padding-top': 'var(--ti-common-space-0)',
+  'ti-popeditor-tabs-body-right-padding-right': 'var(--ti-common-space-0)',
+  'ti-popeditor-tabs-body-right-padding-bottom': 'var(--ti-common-space-0)',
+  'ti-popeditor-tabs-body-right-padding-left': 'var(--ti-common-space-4x)',
+  'ti-popeditor-tree-input-padding-left': 'calc(var(--ti-common-space-8x, 32px) - 4px)',
+  'ti-popeditor-tree-input-padding-right': 'var(--ti-common-space-2x, 8px)',
+  'ti-popeditor-tree-input-prefix-visibility': 'visible',
+  'ti-popeditor-tree-input-sufffix-visibility': 'hidden'
+}

packages/theme/src/popeditor/vars.less

@@ -31,12 +31,18 @@
   --ti-popeditor-tabs-selected-text-color: var(--ti-common-color-line-active, #5e7ce0);
   // 弹出框头部标题高度
   --ti-popeditor-tabs-li-height: var(--ti-common-size-10x, 40px);
+  // 出框头部标题行高
+  --ti-popeditor-tabs-li-line-height: var(--ti-common-size-10x, 40px);
+  // 出框头部标题字体大小
+  --ti-popeditor-tabs-font-size: var(--ti-common-font-size-1);
   // 弹出框头部标题选中文本字重
   --ti-popeditor-tabs-selected-font-weight: var(--ti-common-font-weight-bold, 700);
   // 弹出框查询条件item底部外边距
   --ti-popeditor-search-item-margin-bottom: var(--ti-common-space-3x, 12px);
-  // 弹出框查询条件页脚垂直外边距
-  --ti-popeditor-search-footer-margin-vertical: var(--ti-common-space-3x, 12px);
+  // 弹出框查询条件页脚顶部外边距
+  --ti-popeditor-search-footer-margin-top: var(--ti-common-space-3x, 12px);
+  // 弹出框查询条件页脚底部外边距
+  --ti-popeditor-search-footer-margin-bottom: var(--ti-common-space-3x, 12px);
   // 弹出框查询条件页脚水平外边距
   --ti-popeditor-search-footer-margin-horizontal: auto;
   // 弹出编辑头部标签页文本色(hide)
@@ -45,14 +51,54 @@
   --ti-popeditor-tabs-li-padding-vertical: var(--ti-common-space-0, 0px);
   // 弹出表格头部标签页item水平内边距
   --ti-popeditor-tabs-li-padding-horizontal: var(--ti-common-space-5x, 20px);
-  // 弹出框表格垂直内边距
-  --ti-popeditor-tabs-body-padding-vertical: var(--ti-common-space-0, 0px);
-  // 弹出框表格水平内边距
-  --ti-popeditor-tabs-body-padding-horizontal: var(--ti-common-space-base, 4px);
+  // 弹出表格头部标签页item右侧外边距
+  --ti-popeditor-tabs-li-margin-right: var(--ti-common-space-0, 0px);
+  // 弹出表格(左侧）标签页内容区顶部内边距
+  --ti-popeditor-tabs-body-left-padding-top: var(--ti-common-space-0, 0px);
+  // 弹出表格(左侧）标签页内容区右侧内边距
+  --ti-popeditor-tabs-body-left-padding-right: var(--ti-common-space-base, 4px);
+  // 弹出表格(左侧）标签页内容区底部内边距
+  --ti-popeditor-tabs-body-left-padding-bottom: var(--ti-common-space-0, 0px);
+  // 弹出表格(左侧）标签页内容区左侧内边距
+  --ti-popeditor-tabs-body-left-padding-left: var(--ti-common-space-base, 4px);
+  // 弹出表格(右侧）标签页内容区顶部内边距
+  --ti-popeditor-tabs-body-right-padding-top: var(--ti-common-space-0, 0px);
+  // 弹出表格(右侧）标签页内容区右侧内边距
+  --ti-popeditor-tabs-body-right-padding-right: var(--ti-common-space-base, 4px);
+  // 弹出表格(右侧）标签页内容区底部内边距
+  --ti-popeditor-tabs-body-right-padding-bottom: var(--ti-common-space-0, 0px);
+  // 弹出表格(右侧）标签页内容区左侧内边距
+  --ti-popeditor-tabs-body-right-padding-left: var(--ti-common-space-base, 4px);
   // 弹出表格内容顶部内边距
   --ti-popeditor-tabs-body-item-padding-top: var(--ti-common-space-3x, 12px);
   // 弹出表格内容水平内边距
   --ti-popeditor-tabs-body-item-padding-horizontal: var(--ti-common-space-3x, 12px);
   // 弹出表格内容底部内边距
   --ti-popeditor-tabs-body-item-padding-bottom: var(--ti-common-space-0, 0px);
+  // 弹出表格标签页水平方向内边距
+  --ti-popeditor-tabs-header-padding-horizontal: var(--ti-common-space-10, 10px);
+  // 弹出表格分页顶部内边距
+  --ti-popeditor-pager-padding-top: var(--ti-common-space-6x, 24px);
+  // 弹框底部对齐方式
+  --ti-popeditor-footer-text-align: center;
+  // 弹框底部顶部内边距
+  --ti-popeditor-footer-padding-top: var(--ti-common-space-7x, 28px);
+  // 弹出表格搜索项左侧标签文本默认宽度
+  --ti-popeditor-search-item-width: 160px;
+  // 弹出表格搜索项左侧标签文本对齐方式
+  --ti-popeditor-search-item-text-align: right;
+  // 弹出表格搜索项左侧标签文本右侧内边距
+  --ti-popeditor-search-item-padding-right: var(--ti-common-space-0, 0px);
+  // 弹出表格搜索项左侧标签文本左侧内边距
+  --ti-popeditor-search-item-padding-left: var(--ti-common-space-0, 0px);
+  // 弹出表格搜索底部按钮对齐方式
+  --ti-popeditor-search-footer-text-align: center;
+  // 弹出树搜索框左侧内边距
+  --ti-popeditor-tree-input-padding-left: var(--ti-common-space-2x, 8px);
+  // 弹出树搜索框右侧内边距
+  --ti-popeditor-tree-input-padding-right: calc(var(--ti-common-space-8x, 32px) - 4px);
+  // 弹出树搜索框是否显示前置图标
+  --ti-popeditor-tree-input-prefix-visibility: hidden;
+  // 弹出树搜索框是否显示后置图标
+  --ti-popeditor-tree-input-sufffix-visibility: visible;
 }

packages/theme/src/theme.config.js

@@ -89,6 +89,7 @@ export default {
   'radio-button': 'radio-button',
   'radio-group': 'radio-group',
   'split': 'split-wrapper',
-  'image-viewer': 'image-viewer',
-  'float-bar': 'float-bar'
+  'float-bar': 'float-bar',
+  'popeditor': 'popeditor__dialog-box',
+  'image-viewer': 'image-viewer'
 }

packages/theme/src/vars.less

@@ -70,3 +70,4 @@
 @import './skeleton-item/vars.less';
 @import './color-picker/vars.less';
 @import './color-select-panel/vars.less';
+@import './popeditor/vars.less';

packages/vue/src/popeditor/src/pc.vue

@@ -58,6 +58,7 @@
         </span>
       </template>
     </tiny-input>
+    <!-- 联想查询下拉表格 -->
     <transition name="tiny-zoom-in-top" @after-leave="doDestroy">
       <div ref="popper" v-show="state.showSuggestPanel">
         <tiny-grid
@@ -79,7 +80,10 @@
         ></tiny-grid>
       </div>
     </transition>
+
     <tiny-dialog-box
+      ref="popeditorDialogBox"
+      class="tiny-popeditor__dialog-box"
       :visible="state.open"
       @update:visible="state.open = $event"
       :resize="resize"
@@ -103,12 +107,9 @@
                 :key="item.field"
                 :style="{ width: 100 * ((item.span || 6) / 12) + '%' }"
               >
-                <label
-                  class="tiny-popeditor__search-label"
-                  :title="item.label"
-                  :style="{ width: item.labelWidth || '160px' }"
-                  >{{ item.label }}</label
-                >
+                <label class="tiny-popeditor__search-label" :title="item.label" :style="{ width: item.labelWidth }">
+                  {{ item.label }}
+                </label>
                 <component
                   :is="item.component || 'tiny-input'"
                   v-model="state.search[item.field]"
@@ -137,6 +138,7 @@
             </div>
           </slot>
         </div>
+
         <div v-if="popseletor === 'grid'" class="tiny-popeditor-body">
           <div :class="['tiny-popeditor-body__left', { 'tiny-popeditor-body__radio': !multi }]">
             <div class="tiny-popeditor__tabs">
@@ -162,6 +164,7 @@
                 </ul>
               </div>
               <div class="tiny-popeditor__tabs-body">
+                <!-- state.historyGridDataset没有赋值，没有找到实际的使用意义 -->
                 <div v-if="state.activeName === 'history'" class="tabs-body-item">
                   <tiny-grid
                     ref="historyGrid"
@@ -276,16 +279,22 @@
             </div>
           </div>
         </div>
-        <div v-if="popseletor === 'tree'">
+
+        <div v-if="popseletor === 'tree'" class="tiny-popeditor__tree">
           <tiny-input
-            class="tiny-popeditor_filter-input"
+            class="tiny-popeditor__filter-input"
             :placeholder="t('ui.popeditor.filterNode')"
             v-model="state.filterText"
+            :prefix-icon="iconSearch"
             :suffix-icon="iconSearch"
           ></tiny-input>
-          <tiny-tree ref="tree" v-bind="state.treeOp" @check-change="treeCheckChange"></tiny-tree>
+
+          <div class="tiny-popeditor__tree-wrapper" :style="{ maxHeight: state.treeWrapperMaxHeight }">
+            <tiny-tree ref="tree" v-bind="state.treeOp" @check-change="treeCheckChange"></tiny-tree>
+          </div>
         </div>
       </template>
+
       <template #footer>
         <span class="tiny-toolbar" v-if="state.theme === 'saas'">
           <slot name="footer" :confirm="handleConfirm" :cancel="handleCancel">