feat(admin): implement group-centric relations and system/module/company linkage views

src/pages/admin/SystemsPage.vue

@@ -21,9 +21,11 @@
       <el-table-column prop="system_key" label="System Key" width="200" />
       <el-table-column prop="name" label="名稱" min-width="180" />
       <el-table-column prop="status" label="狀態" width="120" />
-      <el-table-column label="操作" width="120">
+      <el-table-column label="操作" width="260">
         <template #default="{ row }">
           <el-button size="small" @click="openEdit(row)">編輯</el-button>
+          <el-button size="small" @click="openRelations(row, 'groups')">群組</el-button>
+          <el-button size="small" @click="openRelations(row, 'members')">會員</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -63,6 +65,33 @@
         <el-button type="primary" :loading="savingEdit" @click="handleEdit">儲存</el-button>
       </template>
     </el-dialog>
+
+    <el-dialog v-model="showRelationDialog" :title="`系統關聯：${relationSystemKey}`" width="900px">
+      <el-tabs v-model="relationTab">
+        <el-tab-pane label="所屬群組" name="groups">
+          <el-table :data="relationGroups" border stripe v-loading="relationLoading">
+            <template #empty><el-empty description="尚無關聯群組" /></template>
+            <el-table-column prop="group_key" label="Group Key" width="220" />
+            <el-table-column prop="group_name" label="名稱" min-width="220" />
+            <el-table-column prop="status" label="狀態" width="120" />
+          </el-table>
+        </el-tab-pane>
+        <el-tab-pane label="涉及會員" name="members">
+          <el-table :data="relationMembers" border stripe v-loading="relationLoading">
+            <template #empty><el-empty description="尚無關聯會員" /></template>
+            <el-table-column prop="authentik_sub" label="Authentik Sub" min-width="260" />
+            <el-table-column prop="email" label="Email" min-width="220" />
+            <el-table-column prop="display_name" label="顯示名稱" min-width="160" />
+            <el-table-column label="啟用" width="80">
+              <template #default="{ row }">{{ row.is_active ? '是' : '否' }}</template>
+            </el-table-column>
+          </el-table>
+        </el-tab-pane>
+      </el-tabs>
+      <template #footer>
+        <el-button @click="showRelationDialog = false">關閉</el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -70,7 +99,7 @@
 import { ref, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { getSystems, createSystem, updateSystem } from '@/api/systems'
+import { getSystems, createSystem, updateSystem, getSystemGroups, getSystemMembers } from '@/api/systems'
 
 const systems = ref([])
 const loading = ref(false)
@@ -89,6 +118,13 @@ const rules = {
   name: [{ required: true, message: '請輸入名稱', trigger: 'blur' }]
 }
 
+const showRelationDialog = ref(false)
+const relationLoading = ref(false)
+const relationSystemKey = ref('')
+const relationTab = ref('groups')
+const relationGroups = ref([])
+const relationMembers = ref([])
+
 async function load() {
   loading.value = true
   error.value = false
@@ -156,5 +192,24 @@ async function handleEdit() {
   }
 }
 
+async function openRelations(row, tab) {
+  relationSystemKey.value = row.system_key
+  relationTab.value = tab
+  showRelationDialog.value = true
+  relationLoading.value = true
+  try {
+    const [groupsRes, membersRes] = await Promise.all([
+      getSystemGroups(row.system_key),
+      getSystemMembers(row.system_key)
+    ])
+    relationGroups.value = groupsRes.data?.items || []
+    relationMembers.value = membersRes.data?.items || []
+  } catch (err) {
+    ElMessage.error('載入系統關聯資料失敗')
+  } finally {
+    relationLoading.value = false
+  }
+}
+
 onMounted(load)
 </script>