From 1e0d8b27354e3745ff14a38760f93b0fa285ca38 Mon Sep 17 00:00:00 2001
From: From-wh <from-wh@hotmail.com>
Date: Tue, 20 Oct 2026 16:41:37 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=AE=A1=E7=90=86=E7=AB=AF):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20DIY=20=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E9=9D=A2=E6=9D=BF=E6=BB=91=E5=9D=97=E8=A2=AB?=
 =?UTF-8?q?=E5=8E=8B=E7=BC=A9=E4=B8=8E=E5=8F=96=E8=89=B2=E8=A1=8C=E9=94=99?=
 =?UTF-8?q?=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../diy/components/CustomDesign/AttrList.vue  |  9 +++++++
 .../components/ConfigBackground.vue           |  6 ++---
 .../CustomDesign/components/ConfigPadding.vue | 25 +++++++++++++------
 .../CustomDesign/components/ConfigRadius.vue  | 20 +++++++++------
 4 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/frontend/admin/src/diy/components/CustomDesign/AttrList.vue b/frontend/admin/src/diy/components/CustomDesign/AttrList.vue
index b2912837a..769e55410 100644
--- a/frontend/admin/src/diy/components/CustomDesign/AttrList.vue
+++ b/frontend/admin/src/diy/components/CustomDesign/AttrList.vue
@@ -416,6 +416,15 @@ function linkUrl(e) {
   :deep(.el-form-item__content) {
     margin-left: 80px !important;
     line-height: 36px !important;
+    /* EP 表单内容区是 flex 容器，行容器默认不撑满会被压缩，
+       其内部的 el-slider（flex: 1）随之被压成 0 宽，表现为滑块不可见/样式异常；
+       basis 取 100% 保证每行独占一行（如背景色的两行取色不会挤到同一行）。
+       圆角/内边距的 .c_rows/.c_content 由各自组件自行撑满 */
+    > .row,
+    > .row-space-between {
+      flex: 1 1 100%;
+      min-width: 0;
+    }
   }
   :deep(.el-form-item--small .el-form-item__label) {
     line-height: 38px !important;
diff --git a/frontend/admin/src/diy/components/CustomDesign/components/ConfigBackground.vue b/frontend/admin/src/diy/components/CustomDesign/components/ConfigBackground.vue
index 2f83ce052..9b953dcdd 100644
--- a/frontend/admin/src/diy/components/CustomDesign/components/ConfigBackground.vue
+++ b/frontend/admin/src/diy/components/CustomDesign/components/ConfigBackground.vue
@@ -8,7 +8,7 @@
         <el-radio label="right-diagonal" value="right-diagonal">右斜</el-radio>
       </el-radio-group>
     </div>
-    <div class="row">
+    <div class="row-space-between">
       <div class="iconfont iconlianjie"></div>
       <el-color-picker v-model="curComponent.propValue.backgroundColor" @change="onChange" show-alpha></el-color-picker>
       <el-input
@@ -26,7 +26,7 @@
         >重置</span
       >
     </div>
-    <div class="row" style="margin-top: 10px">
+    <div class="row-space-between" style="margin-top: 10px">
       <el-color-picker v-model="curComponent.propValue.bgColor2" @change="onChange" show-alpha></el-color-picker>
       <el-input
         v-model="curComponent.propValue.bgColor2"
@@ -64,7 +64,7 @@ function onChange() {
 </script>
 
 <style scoped lang="scss">
-.row {
+.row-space-between {
   display: flex;
   align-items: center;
   position: relative;
diff --git a/frontend/admin/src/diy/components/CustomDesign/components/ConfigPadding.vue b/frontend/admin/src/diy/components/CustomDesign/components/ConfigPadding.vue
index 3b11c783e..6465f2d4a 100644
--- a/frontend/admin/src/diy/components/CustomDesign/components/ConfigPadding.vue
+++ b/frontend/admin/src/diy/components/CustomDesign/components/ConfigPadding.vue
@@ -2,7 +2,14 @@
   <el-form-item label="内边距" class="margin-style-config">
     <div class="c_content">
       <div class="main-setting">
-        <el-slider v-model="paddingMainVal" :max="100" show-input @input="handlePaddingMainChange"></el-slider>
+        <el-slider
+          v-model="paddingMainVal"
+          :max="100"
+          show-input
+          :show-input-controls="false"
+          input-size="small"
+          @input="handlePaddingMainChange"
+        ></el-slider>
         <div class="expand-icon" @click="isPaddingExpanded = !isPaddingExpanded">
           <span class="iconfont iconbianju" :class="isPaddingExpanded ? 'selected' : ''"></span>
         </div>
@@ -103,7 +110,8 @@ function handlePaddingMainChange(val) {
 .margin-style-config {
   margin-bottom: 20px;
   .c_content {
-    flex: 1;
+    flex: 1 1 100%;
+    min-width: 0;
   }
   .main-setting {
     display: flex;
@@ -134,12 +142,14 @@ function handlePaddingMainChange(val) {
     :deep(.el-slider) {
       flex: 1;
       margin-right: 0;
-      .el-slider__input {
-        width: 60px;
-        padding-right: 0px;
+      min-width: 0;
+      /* 表单内容区仅约 220px：收窄 EP 默认的滑轨-输入框间距(30px)、输入框取 90px 并去掉 +/- 控件，
+         保证滑轨有足够可拖动宽度，且数值不被控件或裁切挤没 */
+      .el-slider__runway.show-input {
+        margin-right: 8px;
       }
-      .el-slider__runway {
-        margin-right: 75px;
+      .el-slider__input {
+        width: 90px;
       }
     }
   }
@@ -174,7 +184,6 @@ function handlePaddingMainChange(val) {
             border: none;
             padding-left: 5px;
             text-align: left;
-            padding-right: 30px;
           }
         }
         :deep(.el-input__wrapper) {
diff --git a/frontend/admin/src/diy/components/CustomDesign/components/ConfigRadius.vue b/frontend/admin/src/diy/components/CustomDesign/components/ConfigRadius.vue
index 73fd6b2b1..023a64060 100644
--- a/frontend/admin/src/diy/components/CustomDesign/components/ConfigRadius.vue
+++ b/frontend/admin/src/diy/components/CustomDesign/components/ConfigRadius.vue
@@ -1,6 +1,6 @@
 <template>
   <el-form-item :label="`${labelPrefix}圆角`" class="margin-style-config">
-    <div class="c_row">
+    <div class="c_rows">
       <div class="c_content">
         <div class="main-setting">
           <el-slider
@@ -125,9 +125,12 @@ function handleRadiusChange(val) {
 .margin-style-config {
   // padding: 0px 15px 0 15px;
   margin-bottom: 18px;
-  .c_row {
+  .c_rows {
     display: flex;
     justify-content: space-between;
+    /* 直接子级撑满 EP 表单内容行，避免整体被压缩（滑块随之被压扁） */
+    flex: 1 1 100%;
+    min-width: 0;
   }
   .c_label {
     font-size: 12px;
@@ -138,6 +141,7 @@ function handleRadiusChange(val) {
   }
   .c_content {
     flex: 1;
+    min-width: 0;
   }
   .main-setting {
     display: flex;
@@ -168,11 +172,14 @@ function handleRadiusChange(val) {
     :deep(.el-slider) {
       flex: 1;
       margin-right: 0;
-      .el-slider__input {
-        width: 60px;
+      min-width: 0;
+      /* 表单内容区仅约 220px：收窄 EP 默认的滑轨-输入框间距(30px)、输入框取 90px，
+         保证滑轨有足够可拖动宽度，且数值不被 +/- 控件或裁切挤没 */
+      .el-slider__runway.show-input {
+        margin-right: 8px;
       }
-      .el-slider__runway {
-        margin-right: 75px;
+      .el-slider__input {
+        width: 90px;
       }
     }
   }
@@ -205,7 +212,6 @@ function handleRadiusChange(val) {
             border: none;
             padding-left: 5px;
             text-align: left;
-            padding-right: 40px;
           }
         }
         :deep(.el-input__wrapper) {