fix(管理端): 修复 DIY 自定义组件属性面板滑块被压缩与取色行错位

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;

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;

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) {

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) {