bugfix: form样式调整 TencentBlueKing#1578

hLinx · Dec 2, 2022 · 9fd67bc · 9fd67bc
2 parents 39d3d4f + 54abebb
commit 9fd67bc
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 45 deletions.
diff --git a/src/frontend/src/components/jb-form/index.vue b/src/frontend/src/components/jb-form/index.vue
@@ -112,11 +112,13 @@
                     const { width } = item.querySelector('span').getBoundingClientRect();
                     max = Math.max(max, width);
                 });
+
+                const labelWidth = max + labelPadding + safePadding;
                 $labelEleList.forEach((item) => {
-                    item.style.width = `${max + labelPadding + safePadding}px`;
+                    item.style.width = `${labelWidth}px`;
                 });
                 $formEle.querySelectorAll('.bk-form-content').forEach((item) => {
-                    item.style.marginLeft = `${max + this.paddingLeft}px`;
+                    item.style.marginLeft = `${labelWidth}px`;
                 });
                 this.max = max;
             },
@@ -180,22 +182,20 @@
 <style lang='postcss'>
     .job-form {
         .bk-form {
+            .bk-label {
+                height: 32px;
+                padding-right: 24px;
+                word-break: keep-all;
+                white-space: pre;
+                box-sizing: border-box;
+            }
+
             .bk-form-item {
-                display: flex;
                 margin-bottom: 20px;
-
-                .bk-form-content {
-                    flex: 1;
-                    display: flex;
-                    flex-direction: column;
-                    margin-left: 0 !important;
-                    overflow: hidden;
-                }
             }
 
             &.bk-form-vertical {
                 .bk-form-item {
-                    flex-direction: column;
                     margin: 0;
                     margin-bottom: 20px;
                 }
@@ -229,12 +229,5 @@
                 }
             }
         }
-
-        .bk-label {
-            padding-right: 24px;
-            word-break: keep-all;
-            white-space: pre;
-            box-sizing: border-box;
-        }
     }
 </style>
diff --git a/src/frontend/src/components/jb-form/item.vue b/src/frontend/src/components/jb-form/item.vue
@@ -28,14 +28,13 @@
 <template>
     <bk-form-item
         ref="bkFormItem"
+        class="jb-form-item"
         :class="classes"
         :error-display-type="errorDisplayType"
         :label="label"
         v-bind="$attrs"
         v-on="$listeners">
-        <div class="jb-form-item-content">
-            <slot />
-        </div>
+        <slot />
     </bk-form-item>
 </template>
 <script>
@@ -47,29 +46,21 @@
                 type: String,
                 default: '',
             },
-            layout: {
-                type: String,
-                default: '',
-            },
             errorDisplayType: {
                 type: String,
                 default: 'normal',
             },
         },
-        
+
         computed: {
             classes () {
                 const classes = {
-                    'jb-form-item': true,
                     'label-miss': !this.label,
                 };
-                if (this.layout) {
-                    classes[`layout-${this.layout}`] = true;
-                }
                 return classes;
             },
         },
-        
+
         methods: {
             clearValidator () {
                 this.$refs.bkFormItem.clearValidator();
@@ -87,20 +78,8 @@
             }
         }
 
-        &.layout-inline {
-            flex-direction: row !important;
-        }
-
-        &.layout-vertical {
-            flex-direction: column !important;
-        }
-
         .jb-form-item-content {
             flex: 1;
         }
-
-        .bk-label {
-            height: 32px;
-        }
     }
 </style>
diff --git a/src/frontend/src/views/dangerous-rule-manage/index/index.vue b/src/frontend/src/views/dangerous-rule-manage/index/index.vue
@@ -319,6 +319,8 @@
 </script>
 <style lang='postcss'>
     .dangerous-rule-manage-page {
+        padding-bottom: 20px;
+
         .rule-table {
             width: 100%;
             border: 1px solid #dcdee5;

diff --git a/src/frontend/src/views/script-template/index/index.vue b/src/frontend/src/views/script-template/index/index.vue
@@ -93,7 +93,7 @@
         </div>
         <element-teleport to="#siteHeaderStatusBar">
             <span style="padding-left: 12px; font-size: 12px; color: #979ba5;">
-                {{ $t('脚本模板仅对当前用户在新建脚本相关场景下有效（如快速执行脚本、新建脚本、作业脚本步骤）') }}
+                {{ $t('scriptTemplate.脚本模板仅对当前用户在新建脚本相关场景下有效（如快速执行脚本、新建脚本、作业脚本步骤）') }}
             </span>
         </element-teleport>
     </div>