fix: style

Author: wangdan-fit2cloud

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

@@ -1,21 +1,27 @@
 <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>
     </el-tooltip>
   </div>
 </template>
 <script setup lang="ts">
+
 const props = defineProps<{
   tags: string[]
   size?: 'large' | 'default' | 'small'

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')"
         >

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>

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;
+  }
+}

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>