内边距，外边距，圆角设置新增收起，展开效果

src/assets/icons/iconfont.json

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "42341458",
+      "name": "统一",
+      "font_class": "unified",
+      "unicode": "e7a7",
+      "unicode_decimal": 59303
+    },
+    {
+      "icon_id": "42341457",
+      "name": "独个",
+      "font_class": "alone",
+      "unicode": "e7a8",
+      "unicode_decimal": 59304
+    },
+    {
+      "icon_id": "42184242",
+      "name": "消息样式一",
+      "font_class": "xiaoxiyangshiyi",
+      "unicode": "e7a6",
+      "unicode_decimal": 59302
+    },
     {
       "icon_id": "42182269",
       "name": "圆背景右箭头",

src/components/base/margin/index.vue

@@ -1,7 +1,14 @@
 <template>
-    <div class="flex-col gap-10 w">
+    <div class="flex-col w">
-        <slider v-model="form.margin" :max="200" @update:model-value="margin_event"></slider>
+        <div class="flex-row gap-10 align-c">
-        <div class="flex-row flex-wrap gap-x-20 mt-10">
+            <slider v-model="form.margin" :max="200" @update:model-value="margin_event"></slider>
+            <el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
+                <div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
+                    <icon :name="icon_data.name" size="24"></icon>
+                </div>
+            </el-tooltip>
+        </div>
+        <div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
             <div class="flex-width-half pr-10">
                 <input-number v-model="form.margin_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
             </div>
@@ -61,4 +68,28 @@ const pr_event = (val: number | undefined) => {
     form.value.margin = 0;
     emit('update:value', form);
 };
+//#region 展开收起
+const icon_data = reactive({
+    name: 'unified',
+    title: '统一'
+});
+const icon_event = (name: string) => {
+    if (name == 'unified') {
+        icon_data.name = 'alone';
+        icon_data.title = '独个';
+    } else {
+        icon_data.name = 'unified';
+        icon_data.title = '统一';
+    }
+}
+//#endregion
 </script>
+
+<style lang="scss" scoped>
+    .type-icon{
+        cursor: pointer;
+    }
+    .type-icon-animation {
+        transition: height 0.3s, transform 0.8s, margin-top 0.6s;
+    }
+</style>

src/components/base/padding/index.vue

@@ -1,7 +1,14 @@
 <template>
-    <div class="flex-col gap-10 w">
+    <div class="flex-col w">
-        <slider v-model="form.padding" :max="200" @update:model-value="padding_event"></slider>
+        <div class="flex-row gap-10 align-c">
-        <div class="flex-row flex-wrap gap-x-20 mt-10">
+            <slider v-model="form.padding" :max="200" @update:model-value="padding_event"></slider>
+            <el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
+                <div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
+                    <icon :name="icon_data.name" size="24"></icon>
+                </div>
+            </el-tooltip>
+        </div>
+        <div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
             <div class="flex-width-half pr-10">
                 <input-number v-model="form.padding_top" :max="200" icon-name="enter-t" @update:model-value="pt_event"></input-number>
             </div>
@@ -61,4 +68,27 @@ const pr_event = (val: number | undefined) => {
     form.value.padding = 0;
     emit('update:value', form);
 };
+//#region 展开收起
+const icon_data = reactive({
+    name: 'unified',
+    title: '统一'
+});
+const icon_event = (name: string) => {
+    if (name == 'unified') {
+        icon_data.name = 'alone';
+        icon_data.title = '独个';
+    } else {
+        icon_data.name = 'unified';
+        icon_data.title = '统一';
+    }
+}
+//#endregion
 </script>
+<style lang="scss" scoped>
+    .type-icon{
+        cursor: pointer;
+    }
+    .type-icon-animation {
+        transition: height 0.3s, transform 0.8s, margin-top 0.6s;
+    }
+</style>

src/components/base/radius/index.vue

@@ -1,8 +1,15 @@
 <!-- 通用样式 -->
 <template>
-    <div class="flex-col gap-10 w">
+    <div class="flex-col w">
-        <slider v-model="form.radius" @update:model-value="radius_event"></slider>
+        <div class="flex-row gap-10 align-c">
-        <div class="flex-row flex-wrap gap-x-20 mt-10">
+            <slider v-model="form.radius" @update:model-value="radius_event"></slider>
+            <el-tooltip effect="light" :show-after="200" :hide-after="200" :content="icon_data.title" raw-content placement="top">
+                <div class="flex-1 type-icon flex" @click="icon_event(icon_data.name)">
+                    <icon :name="icon_data.name" size="24"></icon>
+                </div>
+            </el-tooltip>
+        </div>
+        <div class="type-icon-animation flex-row flex-wrap gap-x-20 oh" :style="`${ icon_data.name == 'alone' ? 'margin-top:20px;height: 100%;transform: scale(1);' : 'height:0px;transform: scale(0);margin-top:0px;'}`">
             <div class="flex-width-half pr-10">
                 <input-number v-model="form.radius_top_left" icon-name="radius-l-t" @update:model-value="rtl_event"></input-number>
             </div>
@@ -78,9 +85,30 @@ const rbr_event = (val: number | undefined) => {
     form.value.radius = 0;
     emit('update:value', form.value);
 };
+//#region 展开收起
+const icon_data = reactive({
+    name: 'unified',
+    title: '统一'
+});
+const icon_event = (name: string) => {
+    if (name == 'unified') {
+        icon_data.name = 'alone';
+        icon_data.title = '独个';
+    } else {
+        icon_data.name = 'unified';
+        icon_data.title = '统一';
+    }
+}
+//#endregion
 </script>
 <style lang="scss" scoped>
 .common-styles {
     width: 100%;
 }
+.type-icon{
+    cursor: pointer;
+}
+.type-icon-animation {
+    transition: height 0.3s, transform 0.8s, margin-top 0.6s;
+}
 </style>