feat(admin): 用户管理新增分组列、分组筛选与专属分组一键替换

- 新增分组列：展示用户的专属/公开分组，支持 hover 查看详情 - 新增分组筛选：下拉选择或模糊搜索分组名过滤用户 - 专属分组替换：点击专属分组弹出操作菜单，选择目标分组后自动授予新分组权限、迁移绑定的 Key、移除旧分组权限 - 后端新增 POST /admin/users/:id/replace-group 端点，事务内完成分组替换并失效认证缓存
2026-03-18 23:28:11 +08:00
parent 0236b97d49
commit ba7d2aecbb
29 changed files with 594 additions and 9 deletions
--- a/frontend/src/components/admin/user/GroupReplaceModal.vue
+++ b/frontend/src/components/admin/user/GroupReplaceModal.vue
@@ -0,0 +1,131 @@
+<template>
+  <BaseDialog :show="show" :title="t('admin.users.replaceGroupTitle')" width="narrow" @close="$emit('close')">
+    <div v-if="oldGroup" class="space-y-4">
+      <!-- 提示信息 -->
+      <p class="text-sm text-gray-600 dark:text-gray-400">
+        {{ t('admin.users.replaceGroupHint', { old: oldGroup.name }) }}
+      </p>
+
+      <!-- 当前分组 -->
+      <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-dark-600 dark:bg-dark-800">
+        <div class="flex items-center gap-2">
+          <Icon name="shield" size="sm" class="text-purple-500" />
+          <span class="font-medium text-gray-900 dark:text-white">{{ oldGroup.name }}</span>
+          <Icon name="arrowRight" size="sm" class="ml-auto text-gray-400" />
+          <span v-if="selectedGroupId" class="font-medium text-primary-600 dark:text-primary-400">
+            {{ availableGroups.find(g => g.id === selectedGroupId)?.name }}
+          </span>
+          <span v-else class="text-sm text-gray-400">?</span>
+        </div>
+      </div>
+
+      <!-- 可选分组列表 -->
+      <div v-if="availableGroups.length > 0" class="max-h-64 space-y-2 overflow-y-auto">
+        <label
+          v-for="group in availableGroups"
+          :key="group.id"
+          class="flex cursor-pointer items-center gap-3 rounded-lg border-2 p-3 transition-all"
+          :class="selectedGroupId === group.id
+            ? 'border-primary-400 bg-primary-50/50 dark:border-primary-500 dark:bg-primary-900/20'
+            : 'border-gray-200 hover:border-gray-300 dark:border-dark-600 dark:hover:border-dark-500'"
+        >
+          <input
+            type="radio"
+            :value="group.id"
+            v-model="selectedGroupId"
+            class="sr-only"
+          />
+          <div
+            class="flex h-5 w-5 items-center justify-center rounded-full border-2 transition-all"
+            :class="selectedGroupId === group.id
+              ? 'border-primary-500 bg-primary-500'
+              : 'border-gray-300 dark:border-dark-500'"
+          >
+            <div v-if="selectedGroupId === group.id" class="h-2 w-2 rounded-full bg-white"></div>
+          </div>
+          <div class="flex-1">
+            <span class="font-medium text-gray-900 dark:text-white">{{ group.name }}</span>
+            <span class="ml-2 text-xs text-gray-400">{{ group.platform }}</span>
+          </div>
+        </label>
+      </div>
+
+      <!-- 无可选分组 -->
+      <div v-else class="py-6 text-center text-sm text-gray-400">
+        {{ t('admin.users.noOtherGroups') }}
+      </div>
+    </div>
+
+    <template #footer>
+      <div class="flex justify-end gap-3">
+        <button @click="$emit('close')" class="btn btn-secondary px-5">{{ t('common.cancel') }}</button>
+        <button
+          @click="handleReplace"
+          :disabled="!selectedGroupId || submitting"
+          class="btn btn-primary px-6"
+        >
+          <svg v-if="submitting" class="-ml-1 mr-2 h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          {{ submitting ? t('common.saving') : t('admin.users.replaceGroupConfirm') }}
+        </button>
+      </div>
+    </template>
+  </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@/stores/app'
+import { adminAPI } from '@/api/admin'
+import type { AdminUser, AdminGroup } from '@/types'
+import BaseDialog from '@/components/common/BaseDialog.vue'
+import Icon from '@/components/icons/Icon.vue'
+
+interface Props {
+  show: boolean
+  user: AdminUser | null
+  oldGroup: { id: number; name: string } | null
+  allGroups: AdminGroup[]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['close', 'success'])
+const { t } = useI18n()
+const appStore = useAppStore()
+
+const selectedGroupId = ref<number | null>(null)
+const submitting = ref(false)
+
+// 可选的专属标准分组（排除当前 oldGroup）
+const availableGroups = computed(() => {
+  if (!props.oldGroup) return []
+  return props.allGroups.filter(
+    g => g.status === 'active' && g.is_exclusive && g.subscription_type === 'standard' && g.id !== props.oldGroup!.id
+  )
+})
+
+watch(() => props.show, (v) => {
+  if (v) {
+    selectedGroupId.value = null
+  }
+})
+
+const handleReplace = async () => {
+  if (!props.user || !props.oldGroup || !selectedGroupId.value) return
+  submitting.value = true
+
+  try {
+    const result = await adminAPI.users.replaceGroup(props.user.id, props.oldGroup.id, selectedGroupId.value)
+    appStore.showSuccess(t('admin.users.replaceGroupSuccess', { count: result.migrated_keys }))
+    emit('success')
+    emit('close')
+  } catch (error) {
+    console.error('Failed to replace group:', error)
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -79,7 +79,8 @@
              'sticky-header-cell py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-dark-400',
              getAdaptivePaddingClass(),
              { 'cursor-pointer hover:bg-gray-100 dark:hover:bg-dark-700': column.sortable },
-              getStickyColumnClass(column, index)
+              getStickyColumnClass(column, index),
+              column.class
            ]"
            @click="column.sortable && handleSort(column.key)"
          >
@@ -168,7 +169,8 @@
              :class="[
                'whitespace-nowrap py-4 text-sm text-gray-900 dark:text-gray-100',
                getAdaptivePaddingClass(),
-                getStickyColumnClass(column, colIndex)
+                getStickyColumnClass(column, colIndex),
+                column.class
              ]"
            >
              <slot :name="`cell-${column.key}`"
--- a/frontend/src/components/common/Select.vue
+++ b/frontend/src/components/common/Select.vue
@@ -77,7 +77,13 @@
              ]"
            >
              <slot name="option" :option="option" :selected="isSelected(option)">
-                <span class="select-option-label">{{ getOptionLabel(option) }}</span>
+                <Icon
+                  v-if="option._creatable"
+                  name="search"
+                  size="sm"
+                  class="flex-shrink-0 text-gray-400"
+                />
+                <span class="select-option-label" :class="option._creatable && 'italic text-gray-500 dark:text-dark-300'">{{ getOptionLabel(option) }}</span>
                <Icon
                  v-if="isSelected(option)"
                  name="check"
@@ -127,6 +133,8 @@ interface Props {
  emptyText?: string
  valueKey?: string
  labelKey?: string
+  creatable?: boolean
+  creatablePrefix?: string
 }

 interface Emits {
@@ -138,6 +146,8 @@ const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  error: false,
  searchable: false,
+  creatable: false,
+  creatablePrefix: '',
  valueKey: 'value',
  labelKey: 'label'
 })
@@ -217,6 +227,10 @@ const selectedLabel = computed(() => {
  if (selectedOption.value) {
    return getOptionLabel(selectedOption.value)
  }
+  // In creatable mode, show the raw value if no matching option
+  if (props.creatable && props.modelValue) {
+    return String(props.modelValue)
+  }
  return placeholderText.value
 })

@@ -231,6 +245,12 @@ const filteredOptions = computed(() => {
      if (opt.description && String(opt.description).toLowerCase().includes(query)) return true
      return false
    })
+    // In creatable mode, always prepend a fuzzy search option
+    if (props.creatable && searchQuery.value.trim()) {
+      const trimmed = searchQuery.value.trim()
+      const prefix = props.creatablePrefix || t('common.search')
+      opts = [{ [props.valueKey]: trimmed, [props.labelKey]: `${prefix} "${trimmed}"`, _creatable: true }, ...opts]
+    }
  }
  return opts
 })
--- a/frontend/src/components/common/types.ts
+++ b/frontend/src/components/common/types.ts
@@ -6,5 +6,6 @@ export interface Column {
  key: string
  label: string
  sortable?: boolean
+  class?: string
  formatter?: (value: any, row: any) => string
 }
--- a/frontend/src/components/icons/Icon.vue
+++ b/frontend/src/components/icons/Icon.vue
@@ -86,6 +86,7 @@ const icons = {
  download: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4',
  upload: 'M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5',
  filter: 'M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z',
+  globe: 'M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418',
  sort: 'M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9',

  // Security