From 49bdd9ba409fea72cc253e68b8463424cb862656 Mon Sep 17 00:00:00 2001
From: James-9696 <hujm969696@163.com>
Date: Mon, 9 Jun 2025 00:27:01 -0700
Subject: [PATCH] feat(popeditor): [popeditor] add attribute lock-scroll

---
 examples/sites/demos/apis/popeditor.js             | 14 ++++++++++++++
 .../popeditor/condition-layout-composition-api.vue |  1 +
 .../pc/app/popeditor/condition-layout.spec.ts      |  1 +
 .../demos/pc/app/popeditor/condition-layout.vue    |  1 +
 .../demos/pc/app/popeditor/webdoc/popeditor.js     |  4 ++--
 packages/vue/src/popeditor/src/index.ts            |  4 ++++
 packages/vue/src/popeditor/src/pc.vue              |  2 ++
 7 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/examples/sites/demos/apis/popeditor.js b/examples/sites/demos/apis/popeditor.js
index c88cd88acc..f92c876a13 100644
--- a/examples/sites/demos/apis/popeditor.js
+++ b/examples/sites/demos/apis/popeditor.js
@@ -344,6 +344,20 @@ export default {
           mode: ['pc'],
           pcDemo: 'title'
         },
+        {
+          name: 'lock-scroll',
+          type: 'boolean',
+          defaultValue: 'true',
+          desc: {
+            'zh-CN': '设置弹出面板的锁定滚动',
+            'en-US': 'Set the lock scroll of the pop-up panel.'
+          },
+          meta: {
+            stable: '3.24.0'
+          },
+          mode: ['pc'],
+          pcDemo: 'condition-layout'
+        },
         {
           name: 'trigger',
           type: "'default' | 'cell' | 'row'",
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue b/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
index 01abc9c43a..c60fc237cf 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout-composition-api.vue
@@ -8,6 +8,7 @@
     text-field="name"
     value-field="id"
     :conditions="conditions"
+    :lock-scroll="false"
   ></tiny-popeditor>
 </template>
 
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout.spec.ts b/examples/sites/demos/pc/app/popeditor/condition-layout.spec.ts
index 072b7f12cf..ab6aeec907 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout.spec.ts
@@ -11,6 +11,7 @@ test('PopEditor 布局与配置', async ({ page }) => {
   const rightLayout = dialogBox.locator('.tiny-popeditor-body__right')
 
   await textBox.click()
+  await expect(page.locator('body')).not.toHaveClass(/dialog-box__scroll-lock/)
   await expect(dialogBox).toBeVisible()
   await expect(leftLayout).toBeVisible()
   await expect(rightLayout).toBeVisible()
diff --git a/examples/sites/demos/pc/app/popeditor/condition-layout.vue b/examples/sites/demos/pc/app/popeditor/condition-layout.vue
index 6bbfbcd4c9..882ee8b079 100644
--- a/examples/sites/demos/pc/app/popeditor/condition-layout.vue
+++ b/examples/sites/demos/pc/app/popeditor/condition-layout.vue
@@ -8,6 +8,7 @@
     text-field="name"
     value-field="id"
     :conditions="conditions"
+    :lock-scroll="false"
   ></tiny-popeditor>
 </template>
 
diff --git a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
index 1b87c29a32..b53853754d 100644
--- a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
+++ b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js
@@ -38,9 +38,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>conditions</code> 项目里属性里的 <code>span</code> 配置栅格，<code>labelWidth</code> 配置 label 宽度，<code>component</code>配置自定义组件，并通过 <code>attrs</code> 配置组件属性。</p>',
+          '<p>通过 <code>conditions</code> 项目里属性里的 <code>span</code> 配置栅格，<code>labelWidth</code> 配置 label 宽度，<code>component</code>配置自定义组件，并通过 <code>attrs</code> 配置组件属性。<code>lock-scroll</code> 配置弹出窗口时是否禁用滚动条。</p>',
         'en-US':
-          '<p>Set <code>span</code> in the attributes of the <code>condition</code> project to configure the grid and <code>labelWidth</code> to configure the label width. <code>component</code>Configure custom components and set component attributes through <code>attrs</code></p>'
+          '<p>Set <code>span</code> in the attributes of the <code>condition</code> project to configure the grid and <code>labelWidth</code> to configure the label width. <code>component</code>Configure custom components and set component attributes through <code>attrs</code>.<code>lock-scroll</code>Configure whether to disable the scrollbar when a pop-up window appears.</p>'
       },
       codeFiles: ['condition-layout.vue']
     },
diff --git a/packages/vue/src/popeditor/src/index.ts b/packages/vue/src/popeditor/src/index.ts
index 67ddd2beaa..fa8a13e2a8 100644
--- a/packages/vue/src/popeditor/src/index.ts
+++ b/packages/vue/src/popeditor/src/index.ts
@@ -183,6 +183,10 @@ export const popeditorProps = {
     type: Boolean,
     default: true
   },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
   placement: {
     type: String,
     default: 'bottom-start'
diff --git a/packages/vue/src/popeditor/src/pc.vue b/packages/vue/src/popeditor/src/pc.vue
index 25f3fd9b68..148c9e0ab9 100644
--- a/packages/vue/src/popeditor/src/pc.vue
+++ b/packages/vue/src/popeditor/src/pc.vue
@@ -97,6 +97,7 @@
       @closed="state.showContent = false"
       :before-close="handleBeforeClose"
       :dialog-class="dialogClass"
+      :lock-scroll="lockScroll"
     >
       <template v-if="state.showContent">
         <div class="tiny-popeditor-top" v-if="state.conditions.length && popseletor === 'grid'">
@@ -394,6 +395,7 @@ export default defineComponent({
     'dialogClass',
     'tabindex',
     'draggable',
+    'lockScroll',
     'placement',
     'popperAppendToBody',
     'suggest',