up

frontend/ops_vue_js/src/i18n/en.json

@@ -442,7 +442,9 @@
     "remark_hint": "Remark only",
     "edit_profile": "Edit Profile",
     "security": "Security",
-    "security_description": "Manage your account security settings"
+    "security_description": "Manage your account security settings",
+    "my_groups": "My Groups",
+    "no_groups": "Not joined any groups yet"
   },
   "button": {
     "submit": "Submit",

frontend/ops_vue_js/src/i18n/zh-CN.json

@@ -442,7 +442,9 @@
     "remark_hint": "仅备注",
     "edit_profile": "编辑资料",
     "security": "安全设置",
-    "security_description": "管理您的账户安全设置"
+    "security_description": "管理您的账户安全设置",
+    "my_groups": "我的群组",
+    "no_groups": "暂未加入任何群组"
   },
   "button": {
     "submit": "提交",

frontend/ops_vue_js/src/stores/user.js

@@ -41,6 +41,7 @@ export const useUserStore = defineStore('user', () => {
   const userInfo = ref(null)    // TabUserInfo_ 详情
   const userCookie = ref(null)  // Cookie session
   const isLoggedIn = ref(false)
+  const groups = ref([])        // 用户加入的群组列表
   // ── Getters ──
   const cookieValue = computed(() => userCookie.value?.Value ?? '')
 
@@ -63,6 +64,9 @@ export const useUserStore = defineStore('user', () => {
   // 是否系统管理员（后端直接返回）
   const isSysAdmin = ref(false)
 
+  // 用户加入的群组名称列表（计算属性）
+  const groupNames = computed(() => groups.value.map(g => g.name))
+
   // ── Actions ──
   function login(cookie) {
     userCookie.value = cookie
@@ -86,6 +90,7 @@ export const useUserStore = defineStore('user', () => {
     user.value = null
     userInfo.value = null
     isSysAdmin.value = false
+    groups.value = []
     isLoggedIn.value = false
     removeStorage(STORAGE_KEY_COOKIE)
   }
@@ -98,6 +103,8 @@ export const useUserStore = defineStore('user', () => {
         userInfo.value = data.userInfo ?? null
         // 存储系统管理员状态
         isSysAdmin.value = data.isSysAdmin === true
+        // 存储用户群组列表
+        groups.value = data.groups ?? []
       }
     } catch {
       // 拦截器已处理错误提示
@@ -123,6 +130,8 @@ export const useUserStore = defineStore('user', () => {
     userCookie,
     isLoggedIn,
     isSysAdmin,
+    groups,
+    groupNames,
     cookieValue,
     avatarUrl,
     birthday,

frontend/ops_vue_js/src/views/user/MyProfile.vue

@@ -95,6 +95,28 @@ onMounted(() => {
           </div>
         </RouterLink>
       </div>
+
+      <!-- My Groups -->
+      <div class="mt-6">
+        <h2 class="mb-3 text-lg font-semibold text-gray-900 dark:text-dk-text">
+          {{ t('settings.my_groups') }}
+        </h2>
+        <div v-if="userStore.groups.length > 0" class="flex flex-wrap gap-2">
+          <span
+            v-for="group in userStore.groups"
+            :key="group.id"
+            class="inline-flex items-center rounded-full bg-purple-100 px-3 py-1 text-sm font-medium text-purple-800 dark:bg-purple-900/30 dark:text-purple-300"
+          >
+            <svg class="mr-1.5 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+            </svg>
+            {{ group.name }}
+          </span>
+        </div>
+        <div v-else class="rounded-lg border border-gray-200 bg-white p-4 text-center text-sm text-gray-500 dark:border-dk-muted dark:bg-dk-card dark:text-dk-subtle">
+          {{ t('settings.no_groups') }}
+        </div>
+      </div>
     </div>
   </div>
 </template>