feat(flow): auto-resolve authentik sub and improve admin dropdown UX

src/pages/admin/PermissionGroupsPage.vue

@@ -36,7 +36,14 @@
               </el-select>
             </el-form-item>
             <el-form-item label="Authentik Sub">
-              <el-input v-model="memberForm.authentikSub" placeholder="authentik-sub-xxx" />
+              <el-select v-model="memberForm.authentikSub" placeholder="選擇會員" filterable allow-create default-first-option style="width: 100%">
+                <el-option
+                  v-for="m in members"
+                  :key="m.authentik_sub"
+                  :label="`${m.display_name || m.email || '(no-name)'} (${m.authentik_sub})`"
+                  :value="m.authentik_sub"
+                />
+              </el-select>
             </el-form-item>
             <el-form-item>
               <el-button type="primary" :loading="addingMember" @click="handleAddMember" :disabled="!memberForm.groupKey || !memberForm.authentikSub">
@@ -177,12 +184,14 @@ import { getSystems } from '@/api/systems'
 import { getModules } from '@/api/modules'
 import { getCompanies } from '@/api/companies'
 import { getSites } from '@/api/sites'
+import { getMembers } from '@/api/members'
 
 const activeTab = ref('groups')
 const systems = ref([])
 const modules = ref([])
 const companies = ref([])
 const sites = ref([])
+const members = ref([])
 const actionOptions = ['view', 'edit', 'manage', 'admin']
 
 const filteredModuleOptions = computed(() => {
@@ -190,7 +199,9 @@ const filteredModuleOptions = computed(() => {
   return modules.value
     .filter(m => m.system_key === groupPermForm.system && !m.module_key.endsWith('.__system__'))
     .map(m => ({
-      value: m.module_key.split('.', 2)[1] || m.module_key,
+      value: m.module_key.startsWith(`${groupPermForm.system}.`)
+        ? m.module_key.slice(groupPermForm.system.length + 1)
+        : m.module_key,
       label: `${m.name} (${m.module_key})`
     }))
 })
@@ -226,16 +237,18 @@ async function loadGroups() {
 }
 
 async function loadCatalogs() {
-  const [systemsRes, modulesRes, companiesRes, sitesRes] = await Promise.all([
+  const [systemsRes, modulesRes, companiesRes, sitesRes, membersRes] = await Promise.all([
     getSystems(),
     getModules(),
     getCompanies(),
-    getSites()
+    getSites(),
+    getMembers()
   ])
   systems.value = systemsRes.data?.items || []
   modules.value = modulesRes.data?.items || []
   companies.value = companiesRes.data?.items || []
   sites.value = sitesRes.data?.items || []
+  members.value = membersRes.data?.items || []
 }
 
 // Create Group