feat(frontend): migrate admin UI to role-site model and clean legacy pages

frontend/src/pages/admin/SystemsPage.vue

@@ -2,55 +2,49 @@
   <div>
     <div class="flex items-center justify-between mb-6">
       <h2 class="text-xl font-bold text-gray-800">系統管理</h2>
-      <el-button type="primary" @click="showDialog = true" :icon="Plus">新增系統</el-button>
+      <el-button type="primary" @click="showCreateDialog = true" :icon="Plus">新增系統</el-button>
     </div>
 
-    <el-alert
-      v-if="error"
-      :title="errorMsg"
-      type="error"
-      show-icon
-      :closable="false"
-      class="mb-4"
-    />
-
+    <el-alert v-if="error" :title="errorMsg" type="error" show-icon :closable="false" class="mb-4" />
     <el-skeleton v-if="loading" :rows="4" animated />
 
     <el-table v-else :data="systems" stripe border class="w-full shadow-sm">
       <template #empty><el-empty description="目前無系統" /></template>
       <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="260">
+      <el-table-column prop="name" label="系統名稱" min-width="180" />
+      <el-table-column prop="idp_client_id" label="Keycloak Client ID" min-width="200" />
+      <el-table-column prop="status" label="狀態" width="110" />
+      <el-table-column label="操作" width="280">
         <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>
+          <el-button size="small" @click="openRoles(row)">角色</el-button>
           <el-button size="small" type="danger" @click="handleDelete(row)">刪除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <el-dialog v-model="showDialog" title="新增系統" @close="resetForm">
-      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
-        <el-form-item label="名稱" prop="name">
-          <el-input v-model="form.name" placeholder="行銷平台" />
+    <el-dialog v-model="showCreateDialog" title="新增系統" width="620px" @close="resetCreateForm">
+      <el-form ref="createFormRef" :model="createForm" :rules="rules" label-width="160px">
+        <el-form-item label="系統名稱" prop="name"><el-input v-model="createForm.name" /></el-form-item>
+        <el-form-item label="Keycloak Client ID" prop="idp_client_id"><el-input v-model="createForm.idp_client_id" /></el-form-item>
+        <el-form-item label="狀態">
+          <el-select v-model="createForm.status" style="width: 100%">
+            <el-option label="active" value="active" />
+            <el-option label="inactive" value="inactive" />
+          </el-select>
         </el-form-item>
       </el-form>
       <template #footer>
-        <el-button @click="showDialog = false">取消</el-button>
-        <el-button type="primary" :loading="submitting" @click="handleCreate">確認</el-button>
+        <el-button @click="showCreateDialog = false">取消</el-button>
+        <el-button type="primary" :loading="creating" @click="handleCreate">建立</el-button>
       </template>
     </el-dialog>
 
-    <el-dialog v-model="showEditDialog" title="編輯系統" @close="resetEditForm">
-      <el-form :model="editForm" label-width="100px">
-        <el-form-item label="System Key">
-          <el-input :model-value="editForm.system_key" disabled />
-        </el-form-item>
-        <el-form-item label="名稱">
-          <el-input v-model="editForm.name" />
-        </el-form-item>
+    <el-dialog v-model="showEditDialog" title="編輯系統" width="620px" @close="resetEditForm">
+      <el-form :model="editForm" label-width="160px">
+        <el-form-item label="System Key"><el-input :model-value="editForm.system_key" disabled /></el-form-item>
+        <el-form-item label="系統名稱"><el-input v-model="editForm.name" /></el-form-item>
+        <el-form-item label="Keycloak Client ID"><el-input v-model="editForm.idp_client_id" /></el-form-item>
         <el-form-item label="狀態">
           <el-select v-model="editForm.status" style="width: 100%">
             <el-option label="active" value="active" />
@@ -60,34 +54,20 @@
       </el-form>
       <template #footer>
         <el-button @click="showEditDialog = false">取消</el-button>
-        <el-button type="primary" :loading="savingEdit" @click="handleEdit">儲存</el-button>
+        <el-button type="primary" :loading="saving" @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="user_sub" label="User 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>
+    <el-dialog v-model="showRolesDialog" :title="`系統角色：${selectedSystemLabel}`" width="980px">
+      <el-table :data="systemRoles" border stripe v-loading="rolesLoading">
+        <template #empty><el-empty description="此系統目前沒有角色" /></template>
+        <el-table-column prop="role_key" label="Role Key" width="200" />
+        <el-table-column prop="name" label="角色名稱" min-width="200" />
+        <el-table-column prop="idp_role_name" label="Keycloak Role" min-width="210" />
+        <el-table-column prop="status" label="狀態" width="110" />
+      </el-table>
       <template #footer>
-        <el-button @click="showRelationDialog = false">關閉</el-button>
+        <el-button @click="showRolesDialog = false">關閉</el-button>
       </template>
     </el-dialog>
   </div>
@@ -97,30 +77,30 @@
 import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { getSystems, createSystem, updateSystem, deleteSystem, getSystemGroups, getSystemMembers } from '@/api/systems'
+import { getSystems, createSystem, updateSystem, deleteSystem, getSystemRoles } from '@/api/systems'
 
 const systems = ref([])
 const loading = ref(false)
 const error = ref(false)
 const errorMsg = ref('')
-const showDialog = ref(false)
-const submitting = ref(false)
-const formRef = ref()
-const showEditDialog = ref(false)
-const savingEdit = ref(false)
 
-const form = ref({ name: '' })
-const editForm = ref({ system_key: '', name: '', status: 'active' })
+const showCreateDialog = ref(false)
+const showEditDialog = ref(false)
+const creating = ref(false)
+const saving = ref(false)
+const createFormRef = ref()
+
+const createForm = ref({ name: '', idp_client_id: '', status: 'active' })
+const editForm = ref({ system_key: '', name: '', idp_client_id: '', status: 'active' })
 const rules = {
-  name: [{ required: true, message: '請輸入名稱', trigger: 'blur' }]
+  name: [{ required: true, message: '請輸入系統名稱', trigger: 'blur' }],
+  idp_client_id: [{ required: true, message: '請輸入 Keycloak Client ID', trigger: 'blur' }]
 }
 
-const showRelationDialog = ref(false)
-const relationLoading = ref(false)
-const relationSystemKey = ref('')
-const relationTab = ref('groups')
-const relationGroups = ref([])
-const relationMembers = ref([])
+const showRolesDialog = ref(false)
+const selectedSystemLabel = ref('')
+const systemRoles = ref([])
+const rolesLoading = ref(false)
 
 async function load() {
   loading.value = true
@@ -130,93 +110,93 @@ async function load() {
     systems.value = res.data?.items || []
   } catch (err) {
     error.value = true
-    errorMsg.value = err.response?.status === 422
-      ? '缺少管理員 API 認證，請檢查前端 .env.development'
-      : '載入失敗，請稍後再試'
+    errorMsg.value = err.response?.data?.detail || '載入系統失敗'
   } finally {
     loading.value = false
   }
 }
 
-function resetForm() {
-  form.value = { name: '' }
+function resetCreateForm() {
+  createForm.value = { name: '', idp_client_id: '', status: 'active' }
 }
 
 function openEdit(row) {
   editForm.value = {
     system_key: row.system_key,
     name: row.name,
+    idp_client_id: row.idp_client_id,
     status: row.status || 'active'
   }
   showEditDialog.value = true
 }
 
 function resetEditForm() {
-  editForm.value = { system_key: '', name: '', status: 'active' }
+  editForm.value = { system_key: '', name: '', idp_client_id: '', status: 'active' }
 }
 
 async function handleCreate() {
-  const valid = await formRef.value.validate().catch(() => false)
+  const valid = await createFormRef.value.validate().catch(() => false)
   if (!valid) return
-  submitting.value = true
+  creating.value = true
   try {
-    const res = await createSystem(form.value)
-    ElMessage.success(`新增成功：${res.data?.system_key || ''}`)
-    showDialog.value = false
-    resetForm()
+    await createSystem(createForm.value)
+    ElMessage.success('新增系統成功')
+    showCreateDialog.value = false
+    resetCreateForm()
     await load()
   } catch (err) {
-    ElMessage.error('新增失敗，請稍後再試')
+    ElMessage.error(err.response?.data?.detail || '新增系統失敗')
   } finally {
-    submitting.value = false
+    creating.value = false
   }
 }
 
 async function handleEdit() {
-  savingEdit.value = true
+  saving.value = true
   try {
     await updateSystem(editForm.value.system_key, {
       name: editForm.value.name,
+      idp_client_id: editForm.value.idp_client_id,
       status: editForm.value.status
     })
     ElMessage.success('更新成功')
     showEditDialog.value = false
     await load()
   } catch (err) {
-    ElMessage.error('更新失敗')
+    ElMessage.error(err.response?.data?.detail || '更新系統失敗')
   } finally {
-    savingEdit.value = false
+    saving.value = false
   }
 }
 
 async function handleDelete(row) {
   try {
-    await ElMessageBox.confirm(`確認刪除系統 ${row.name}（${row.system_key}）？`, '刪除確認', { type: 'warning' })
+    await ElMessageBox.confirm(
+      `確認刪除系統 ${row.name}（${row.system_key}）？`,
+      '刪除確認',
+      { type: 'warning' }
+    )
     await deleteSystem(row.system_key)
     ElMessage.success('刪除成功')
     await load()
   } catch (err) {
     if (err === 'cancel') return
-    ElMessage.error(err.response?.data?.detail || '刪除失敗')
+    ElMessage.error(err.response?.data?.detail || '刪除系統失敗')
   }
 }
 
-async function openRelations(row, tab) {
-  relationSystemKey.value = row.system_key
-  relationTab.value = tab
-  showRelationDialog.value = true
-  relationLoading.value = true
+async function openRoles(row) {
+  selectedSystemLabel.value = `${row.name} (${row.system_key})`
+  showRolesDialog.value = true
+  rolesLoading.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('載入系統關聯資料失敗')
+    const res = await getSystemRoles(row.system_key)
+    systemRoles.value = res.data?.roles || []
+  } catch (_err) {
+    ElMessage.error('載入系統角色失敗')
+    systemRoles.value = []
   } finally {
-    relationLoading.value = false
+    rolesLoading.value = false
   }
 }