fix(系统管理): 调整标签展示

frontend/src/components/pure/ms-tag/ms-tag-group.vue

@@ -4,7 +4,9 @@
       <MsTag v-for="tag of props.tagList.slice(0, props.showNum)" :key="tag.id" v-bind="attrs">
         <slot :tag="tag"> </slot>
       </MsTag>
-      <MsTag v-if="props.tagList.length > props.showNum" v-bind="attrs"> +{{ props.showNum }}</MsTag>
+      <MsTag v-if="props.tagList.length > props.showNum" v-bind="attrs">
+        +{{ props.tagList.length - props.showNum }}</MsTag
+      >
     </div>
   </a-tooltip>
 </template>

frontend/src/views/project-management/projectAndPermission/member/index.vue

@@ -30,26 +30,18 @@
     @batch-action="handleTableBatch"
   >
     <template #userRole="{ record }">
-      <a-tooltip :content="(record.userRoles||[]).map((e: any) => e.name).join(',')">
+      <MsTagGroup
-        <div v-if="!record.showUserSelect">
+        v-if="!record.showUserSelect"
-          <a-tag
+        :tag-list="record.userRoles || []"
-            v-for="org of (record.userRoles || []).slice(0, 3)"
+        :show-num="2"
-            :key="org"
+        type="primary"
-            class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
+        theme="outline"
-            bordered
         @click="changeUser(record)"
       >
-            {{ org.name }}
+        <template #default="{ tag }">
-          </a-tag>
+          {{ tag.name }}
-          <a-tag
+        </template>
-            v-if="(record.userRoles || []).length > 3"
+      </MsTagGroup>
-            class="mr-[4px] border-[rgb(var(--primary-5))] bg-transparent !text-[rgb(var(--primary-5))]"
-            bordered
-            @click="changeUser(record)"
-          >
-            +{{ (record.userRoles || []).length - 3 }}
-          </a-tag>
-        </div>
       <a-select
         v-else
         v-model="record.selectUserList"
@@ -59,7 +51,6 @@
       >
         <a-option v-for="item of userGroupOptions" :key="item.id" :value="item.id">{{ item.name }}</a-option>
       </a-select>
-      </a-tooltip>
     </template>
     <template #enable="{ record }">
       <div v-if="record.enable" class="flex items-center">
@@ -125,6 +116,7 @@
     ProjectMemberItem,
     SearchParams,
   } from '@/models/projectManagement/projectAndPermission';
+  import MsTagGroup from '@/components/pure/ms-tag/ms-tag-group.vue';
 
   const { t } = useI18n();
   const { openModal } = useModal();

frontend/src/views/setting/system/pluginManager/components/pluginTable.vue

@@ -68,7 +68,7 @@
           </a-table-column>
           <a-table-column :title="t('system.plugin.tableColumnsOrg')" :width="300">
             <template #cell="{ record }">
-              <a-tooltip :content="(record.organizations||[]).map((e: any) => e.name).join(',')">
+              <!-- <a-tooltip :content="(record.organizations||[]).map((e: any) => e.name).join(',')">
                 <span>
                   <a-tag
                     v-for="org of (record.organizations || []).slice(0, 3)"
@@ -86,7 +86,12 @@
                     +{{ (record.organizations || []).length - 3 }}
                   </a-tag>
                 </span>
-              </a-tooltip>
+              </a-tooltip> -->
+              <MsTagGroup :tag-list="record.organizations || []" :show-num="2" type="primary" theme="outline">
+                <template #default="{ tag }">
+                  {{ tag.name }}
+                </template>
+              </MsTagGroup>
             </template>
           </a-table-column>
           <a-table-column
@@ -189,6 +194,7 @@
   import type { PluginForms, PluginList, PluginItem, DrawerConfig, UpdatePluginModel } from '@/models/setting/plugin';
   import dayjs from 'dayjs';
   import TableExpand from './tableExpand.vue';
+  import MsTagGroup from '@/components/pure/ms-tag/ms-tag-group.vue';
   import { characterLimit } from '@/utils';
 
   const { t } = useI18n();