refactor(projects): 优化产品项目新增逻辑

src/views/product/setting/modules/setting-team-panel.vue

@@ -103,7 +103,23 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
     >
       <ElTableColumn type="index" label="序号" width="64" align="center" />
       <ElTableColumn prop="userNickname" label="成员姓名" min-width="140" />
-      <ElTableColumn prop="roleName" label="当前角色" min-width="140" />
+      <ElTableColumn label="当前角色" min-width="180">
+        <template #default="{ row }">
+          <div class="setting-team-panel__role-cell">
+            <span class="setting-team-panel__role-main">{{ row.roleName || '--' }}</span>
+            <ElTag
+              v-for="extra in row.additionalRoleNames"
+              :key="extra"
+              size="small"
+              type="info"
+              effect="plain"
+              class="setting-team-panel__role-extra"
+            >
+              {{ extra }}
+            </ElTag>
+          </div>
+        </template>
+      </ElTableColumn>
       <ElTableColumn label="成员状态" width="110" align="center">
         <template #default="{ row }">
           <ElTag :type="getMemberStatusTagType(row.status)">{{ getMemberStatusLabel(row.status) }}</ElTag>
@@ -180,6 +196,17 @@ function getMemberStatusTagType(status: Api.Product.ProductMemberStatus) {
   gap: 12px;
 }
 
+.setting-team-panel__role-cell {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.setting-team-panel__role-extra {
+  font-weight: 400;
+}
+
 @media (width <= 768px) {
   .setting-team-panel__header {
     align-items: flex-start;