From b7fd2cbf7864989c26daad73949ec56f234a8e10 Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Fri, 25 Sep 2026 23:43:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E6=89=80=E5=B1=9E=E5=88=86=E7=BB=84=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E4=B8=8E=E6=93=8D=E4=BD=9C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../UserManagement/UserManagement.css         | 36 ++++++++++++++++++-
 .../UserManagement/UserManagement.vue         |  7 +++-
 2 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/frontend/src/views/components/UserManagement/UserManagement.css b/frontend/src/views/components/UserManagement/UserManagement.css
index 895a2b3..bd6758a 100644
--- a/frontend/src/views/components/UserManagement/UserManagement.css
+++ b/frontend/src/views/components/UserManagement/UserManagement.css
@@ -225,22 +225,56 @@
   flex-wrap: wrap;
   gap: 12px;
   width: 100%;
+  box-sizing: border-box;
+  padding: 12px;
+  border: 1px solid var(--pm-border-color);
+  border-radius: var(--pm-radius-sm);
+  background: var(--pm-bg-secondary);
 }
 
 .membership-tags {
   display: flex;
+  flex: 1 1 160px;
+  align-items: center;
   flex-wrap: wrap;
   gap: 8px;
   min-width: 0;
 }
 
-.membership-tags :deep(.el-tag) {
+.membership-tags .membership-tag {
   height: auto;
+  min-height: 30px;
+  max-width: 100%;
+  padding: 5px 12px;
+  border-radius: 8px;
+  border-color: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 20px;
+  text-align: left;
   white-space: normal;
   overflow-wrap: anywhere;
 }
 
+.membership-tags .membership-tag-default {
+  color: var(--pm-text-secondary);
+  background: var(--el-fill-color);
+  border-color: var(--pm-border-color);
+}
+
+.membership-tags :deep(.el-tag__content) {
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.membership-manage-button {
+  flex: 0 0 auto;
+  margin: 0;
+}
+
 .membership-hint {
+  width: 100%;
   margin: 8px 0 0;
   color: var(--pm-text-secondary);
   font-size: 12px;
diff --git a/frontend/src/views/components/UserManagement/UserManagement.vue b/frontend/src/views/components/UserManagement/UserManagement.vue
index 27f646e..0bb50d4 100644
--- a/frontend/src/views/components/UserManagement/UserManagement.vue
+++ b/frontend/src/views/components/UserManagement/UserManagement.vue
@@ -194,13 +194,18 @@
                 <el-tag
                   v-for="group in selectedMembershipGroups"
                   :key="group.id"
-                  effect="plain"
+                  class="membership-tag"
+                  :class="{ 'membership-tag-default': group.id === 0 }"
+                  effect="light"
                 >
                   {{ group.name }}
                 </el-tag>
               </div>
               <el-button
                 v-if="canManageGroups"
+                class="membership-manage-button"
+                type="primary"
+                plain
                 :disabled="submitting || groupSaving || groupsLoading || Boolean(groupsError)"
                 @click="openMembershipDialog"
               >