perf: tag style

Author: wangdan-fit2cloud

ui/src/components/dynamics-form/constructor/items/UploadInputConstructor.vue

@@ -45,29 +45,35 @@
       },
     ]"
   >
-    <div class="gap-2" style="display: flex">
+    <el-space wrap :size="6" class="mt-4">
       <el-tag
         v-for="tag in formValue.accept"
         :key="tag"
         closable
         :disable-transitions="false"
         @close="handleClose(tag)"
+        type="info"
+        effect="plain"
+        class="upload-file-tag"
       >
         {{ tag }}
       </el-tag>
       <el-input
         v-if="inputVisible"
         ref="InputRef"
         v-model="inputValue"
-        class="w-20"
         size="small"
         @keyup.enter="handleInputConfirm"
         @blur="handleInputConfirm"
+        :style="{
+          '--el-input-border-radius': '4px',
+        }"
       />
       <el-button v-else class="button-new-tag" size="small" @click="showInput">
-        + {{ $t('common.fileUpload.addExtensions') }}
+        <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon
+        >{{ $t('common.fileUpload.addExtensions') }}
       </el-button>
-    </div>
+    </el-space>
   </el-form-item>
 </template>
 <script setup lang="ts">
@@ -146,8 +152,4 @@ onMounted(() => {
   }
 })
 </script>
-<style lang="scss" scoped>
-.gap-2 {
-  gap: 0.5rem;
-}
-</style>
+<style lang="scss" scoped></style>

ui/src/components/resource-authorization-drawer/index.vue

@@ -104,7 +104,7 @@
         width="160"
       >
         <template #default="{ row }">
-          <TagGroup class="cursor" style="width: fit-content" :tags="row.role_name" />
+          <TagGroup class="cursor" :tags="row.role_name" />
         </template>
       </el-table-column>
       <el-table-column :label="$t('common.operation')" align="left" width="340">

ui/src/components/tag-group/index.vue

@@ -39,14 +39,11 @@ const props = defineProps<{
 
 <style lang="scss" scoped>
 .tag-group {
-  :deep(.el-tag__content) {
-    width: 100%;
-  }
   /* tag超出省略号 */
   .tag-ellipsis {
     box-sizing: border-box;
     max-width: 130px;
-    .el-tag__content {
+    :deep(.el-tag__content) {
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;

ui/src/styles/component.scss

@@ -357,3 +357,21 @@
     display: none;
   }
 }
+
+// 添加标签样式
+.upload-file-tag {
+  height: 24px !important;
+  padding: 0 6px !important;
+  font-size: 14px !important;
+}
+.button-new-tag {
+  color: var(--app-input-color-placeholder);
+  border: 1px dashed var(--el-button-border-color);
+  padding: 5px 6px !important;
+  font-size: 14px !important;
+  &:hover {
+    background: var(--app-layout-bg-color);
+    color: var(--app-input-color-placeholder);
+    border: 1px dashed var(--el-button-border-color);
+  }
+}

ui/src/views/system/user-manage/index.vue

@@ -168,7 +168,6 @@
               <template #reference>
                 <TagGroup
                   class="cursor"
-                  style="width: fit-content"
                   :tags="row.role_name"
                   tooltipDisabled
                 />

ui/src/workflow/nodes/base-node/component/FileUploadSettingDialog.vue

@@ -179,20 +179,16 @@
                         }}
                       </el-text>
                     </p>
-                    <el-space wrap :size="2" class="mt-4">
+                    <el-space wrap :size="6" class="mt-4">
                       <el-tag
                         v-for="tag in form_data.otherExtensions"
                         :key="tag"
                         closable
                         :disable-transitions="false"
                         @close="handleClose(tag)"
                         type="info"
-                        class="mr-4"
                         effect="plain"
-                        style="
-                          --el-tag-border-radius: 4px;
-                          --el-tag-border-color: var(--el-border-color);
-                        "
+                        class="upload-file-tag"
                       >
                         {{ tag }}
                       </el-tag>
@@ -203,9 +199,13 @@
                         size="small"
                         @keyup.enter="handleInputConfirm"
                         @blur="handleInputConfirm"
+                        :style="{
+                          '--el-input-border-radius': '4px',
+                        }"
                       />
                       <el-button v-else class="button-new-tag" size="small" @click.stop="showInput">
-                        + {{ $t('common.fileUpload.addExtensions') }}
+                        <AppIcon iconName="app-add-outlined" class="mr-4"></AppIcon>
+                        {{ $t('common.fileUpload.addExtensions') }}
                       </el-button>
                     </el-space>
                   </div>