From d4506d7036698d7a25e525405843991dbf386d5f Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Wed, 16 Jul 2025 14:23:17 +0800
Subject: [PATCH] fix: style

---
 ui/src/components/tag-group/index.vue                | 12 +++++++++---
 ui/src/layout/layout-header/SystemHeader.vue         |  4 ++--
 ui/src/layout/layout-header/UserHeader.vue           |  2 +-
 ui/src/styles/component.scss                         | 11 +++++++++++
 .../system/user-manage/component/UserDrawer.vue      |  2 +-
 5 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/tag-group/index.vue b/ui/src/components/tag-group/index.vue
index 8873d87d..96527fd5 100644
--- a/ui/src/components/tag-group/index.vue
+++ b/ui/src/components/tag-group/index.vue
@@ -1,14 +1,19 @@
 <template>
   <div class="tag-group" v-if="props.tags.length">
-    <el-tag :size="props.size" class="default-tag">
-      <span class="ellipsis">{{ props.tags[0] }}</span>
+    <el-tag :size="props.size" class="default-tag tag-ellipsis" :title="props.tags[0]">
+      {{ props.tags[0] }}
     </el-tag>
     <el-tooltip effect="light" :disabled="tooltipDisabled">
       <el-tag :size="props.size" class="info-tag ml-4 cursor" v-if="props.tags?.length > 1">
         +{{ props.tags?.length - 1 }}
       </el-tag>
       <template #content>
-        <el-tag :size="props.size" v-for="item in props.tags.slice(1)" :key="item" class="default-tag mr-4">
+        <el-tag
+          :size="props.size"
+          v-for="item in props.tags.slice(1)"
+          :key="item"
+          class="default-tag mr-4"
+        >
           {{ item }}
         </el-tag>
       </template>
@@ -16,6 +21,7 @@
   </div>
 </template>
 <script setup lang="ts">
+
 const props = defineProps<{
   tags: string[]
   size?: 'large' | 'default' | 'small'
diff --git a/ui/src/layout/layout-header/SystemHeader.vue b/ui/src/layout/layout-header/SystemHeader.vue
index 782b0ae2..36a4a0e9 100644
--- a/ui/src/layout/layout-header/SystemHeader.vue
+++ b/ui/src/layout/layout-header/SystemHeader.vue
@@ -8,10 +8,10 @@
     <div class="flex-between w-full align-center">
       <h4><el-divider class="ml-16 mr-16" direction="vertical" />{{ $t('views.system.title') }}</h4>
       <div class="flex align-center mr-8">
-        <TopAbout class="mt-4"></TopAbout>
+        <TopAbout></TopAbout>
         <el-divider class="ml-8 mr-8" direction="vertical" />
         <el-button link @click="router.push({ path: '/' })"
-          v-if="hasPermission([RoleConst.USER.getWorkspaceRole,RoleConst.EXTENDS_USER.getWorkspaceRole, 
+          v-if="hasPermission([RoleConst.USER.getWorkspaceRole,RoleConst.EXTENDS_USER.getWorkspaceRole,
             RoleConst.EXTENDS_WORKSPACE_MANAGE.getWorkspaceRole, RoleConst.WORKSPACE_MANAGE.getWorkspaceRole
           ],'OR')"
         >
diff --git a/ui/src/layout/layout-header/UserHeader.vue b/ui/src/layout/layout-header/UserHeader.vue
index 5720b301..6c15d994 100644
--- a/ui/src/layout/layout-header/UserHeader.vue
+++ b/ui/src/layout/layout-header/UserHeader.vue
@@ -21,7 +21,7 @@
         />
       </div>
       <TopMenu></TopMenu>
-      <TopAbout class="mt-4 mr-12"></TopAbout>
+      <TopAbout class="mr-12"></TopAbout>
     </div>
     <Avatar></Avatar>
   </div>
diff --git a/ui/src/styles/component.scss b/ui/src/styles/component.scss
index 9bf3464e..a268bd26 100644
--- a/ui/src/styles/component.scss
+++ b/ui/src/styles/component.scss
@@ -250,3 +250,14 @@
     padding: 4px 16px 12px 12px;
   }
 }
+
+/* tag超出省略号 */
+.tag-ellipsis {
+  box-sizing: border-box;
+  max-width: 130px;
+  .el-tag__content {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
diff --git a/ui/src/views/system/user-manage/component/UserDrawer.vue b/ui/src/views/system/user-manage/component/UserDrawer.vue
index fe1d7000..3f3e984c 100644
--- a/ui/src/views/system/user-manage/component/UserDrawer.vue
+++ b/ui/src/views/system/user-manage/component/UserDrawer.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-drawer v-model="visible" size="60%">
+  <el-drawer v-model="visible" size="600">
     <template #header>
       <h4>{{ title }}</h4>
     </template>