fix: optimize bind-i18n styles (#925)

优化属性面板绑定国际化UI

Author: gene9831

packages/common/component/BindI18n.vue

@@ -4,31 +4,29 @@
       <tiny-select
         ref="selectRef"
         v-model="selectValue"
-        placeholder="请根据显示值搜索"
+        placeholder="请选择多语言文案"
         filterable
+        is-drop-inherit-width
         :filter-method="filterMethod"
         @change="selectI18n"
       >
-        <tiny-option v-for="item in langData" :key="item.key" :label="item[currentLang]" :value="item.key">
-          <div style="display: flex">
-            <span style="flex: 1">{{ item.key }}</span>
-            <span style="flex: 1">{{ item[currentLang] }}</span>
-          </div>
+        <tiny-option v-for="item in langData" :key="item.key" :label="item.key + item[currentLang]" :value="item.key">
         </tiny-option>
       </tiny-select>
       <div v-if="paramsForm.length" class="params-form">
-        <label>国际化参数配置</label>
+        <div class="label">国际化参数配置</div>
         <div v-for="param in paramsForm" :key="param.name" class="params-item">
           <label>{{ param.name }}</label>
           <tiny-input v-model="param.value" @update:modelValue="paramsChange"></tiny-input>
         </div>
       </div>
       <slot name="suffix">
-        <tiny-button type="info" @click="openCreateForm">
-          <icon-plus class="icon-plus"></icon-plus>
-          <span>创建新的多语言文案</span>
-        </tiny-button>
-        <tiny-button v-if="isBind" type="info" @click="unbindI18n"> 解除关联 </tiny-button>
+        <div class="bottom-buttons">
+          <tiny-button v-if="isBind" @click="unbindI18n">解除关联</tiny-button>
+          <tiny-button type="primary" @click="openCreateForm">
+            <span>创建新的多语言文案</span>
+          </tiny-button>
+        </div>
       </slot>
     </div>
     <div v-show="showEditItem" class="addNewLanguage">
@@ -43,9 +41,9 @@
           <input v-model="editForm[locale.lang]" class="tiny-input__inner" />
         </div>
       </div>
-      <div class="add-btns">
-        <tiny-button type="info" @click="activeI18n">国际化管理 </tiny-button>
-        <tiny-button type="info" @click="addBindI18n">添加并关联 </tiny-button>
+      <div class="bottom-buttons">
+        <tiny-button @click="activeI18n">国际化管理</tiny-button>
+        <tiny-button type="primary" @click="addBindI18n">添加并关联</tiny-button>
       </div>
     </div>
   </div>
@@ -57,15 +55,13 @@ import { useLayout, useTranslate } from '@opentiny/tiny-engine-meta-register'
 import { PROP_DATA_TYPE } from '../js/constants'
 import { utils } from '@opentiny/tiny-engine-utils'
 import { Select, Option, Button, Input } from '@opentiny/vue'
-import { iconPlus } from '@opentiny/vue-icon'
 
 export default {
   components: {
     TinySelect: Select,
     TinyOption: Option,
     TinyButton: Button,
-    TinyInput: Input,
-    IconPlus: iconPlus()
+    TinyInput: Input
   },
   inheritAttrs: false,
   props: {
@@ -169,10 +165,7 @@ export default {
 
 <style lang="less" scoped>
 .languageContent {
-  text-align: center;
   z-index: 99;
-  margin-top: 5px;
-  margin-bottom: 16px;
 
   .tiny-svg {
     margin-right: 10px;
@@ -182,17 +175,6 @@ export default {
       color: #ccc;
     }
   }
-  .tiny-button {
-    max-width: initial;
-    padding: 0 12px;
-    background-color: var(--ti-lowcode-tabs-border-color);
-    border-color: var(--ti-lowcode-tootip-input-border-color);
-    color: var(--ti-lowcode-toolbar-icon-color);
-    &:hover {
-      background-color: var(--ti-lowcode-canvas-wrap-bg);
-      border-color: var(--ti-lowcode-tabs-border-color);
-    }
-  }
   .addNewLanguage {
     .tiny-input {
       display: flex;
@@ -209,23 +191,33 @@ export default {
     .tiny-input__inner {
       flex: 1;
     }
-    .add-btns {
-      text-align: right;
-      padding: 0 8px;
-    }
   }
 }
 .params-form {
-  & > label {
-    line-height: 30px;
+  .label {
+    margin: 16px 0;
+    font-size: 12px;
+    line-height: 18px;
+  }
+  .params-item + .params-item {
+    margin-top: 12px;
   }
   .params-item {
     display: flex;
     align-items: center;
     label {
       width: 80px;
     }
-    margin-bottom: 10px;
+  }
+}
+.bottom-buttons {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 16px;
+  gap: 8px;
+  .tiny-button,
+  .tiny-button.tiny-button--default {
+    margin: 0;
   }
 }
 </style>

packages/common/component/I18nInput.vue

@@ -4,13 +4,14 @@
       <template #suffix>
         <tiny-popover
           ref="popoverRef"
-          width="260"
+          width="340"
           trigger="click"
           :visible-arrow="false"
-          popper-class="lowcode"
+          popper-class="i18n-input-popover"
           @hide="onHide"
         >
           <div class="popover-content">
+            <h3 class="title">绑定国际化</h3>
             <icon-close class="icon-close" @click="closePopover"></icon-close>
             <bind-i18n
               ref="addI1i8nRef"
@@ -124,9 +125,24 @@ export default {
   }
 }
 .popover-content {
-  text-align: right;
+  position: relative;
+
+  .title {
+    margin-top: 0;
+    margin-bottom: 16px;
+    font-size: 14px;
+    line-height: 20px;
+  }
   .icon-close {
-    margin-right: 5px;
+    position: absolute;
+    top: 0;
+    right: 0;
   }
 }
 </style>
+
+<style>
+.tiny-popover.tiny-popover.tiny-popper[x-placement].i18n-input-popover {
+  padding: 20px;
+}
+</style>