From 22c71eff6fd47ff42e9d9a128373b0ad8e117830 Mon Sep 17 00:00:00 2001
From: Chris <wtc.justin82@gmail.com>
Date: Tue, 31 Mar 2026 20:58:20 +0800
Subject: [PATCH] feat(admin): add delete APIs and UI actions for all admin
 resources

---
 src/api/api-clients.js                   |  1 +
 src/api/companies.js                     |  1 +
 src/api/members.js                       |  1 +
 src/api/modules.js                       |  1 +
 src/api/permission-groups.js             |  1 +
 src/api/sites.js                         |  1 +
 src/api/systems.js                       |  1 +
 src/pages/admin/ApiClientsPage.vue       | 15 ++++++++++++++-
 src/pages/admin/CompaniesPage.vue        | 23 ++++++++++++++++++++---
 src/pages/admin/MembersPage.vue          | 20 +++++++++++++++++++-
 src/pages/admin/ModulesPage.vue          | 17 +++++++++++++++--
 src/pages/admin/PermissionGroupsPage.vue | 18 ++++++++++++++++--
 src/pages/admin/SitesPage.vue            | 23 ++++++++++++++++++++---
 src/pages/admin/SystemsPage.vue          | 17 +++++++++++++++--
 14 files changed, 126 insertions(+), 14 deletions(-)

diff --git a/src/api/api-clients.js b/src/api/api-clients.js
index 48eceb3..6ec6760 100644
--- a/src/api/api-clients.js
+++ b/src/api/api-clients.js
@@ -4,3 +4,4 @@ export const getApiClients = (params) => adminHttp.get('/admin/api-clients', { p
 export const createApiClient = (data) => adminHttp.post('/admin/api-clients', data)
 export const updateApiClient = (clientKey, data) => adminHttp.patch(`/admin/api-clients/${clientKey}`, data)
 export const rotateApiClientKey = (clientKey) => adminHttp.post(`/admin/api-clients/${clientKey}/rotate-key`)
+export const deleteApiClient = (clientKey) => adminHttp.delete(`/admin/api-clients/${clientKey}`)
diff --git a/src/api/companies.js b/src/api/companies.js
index 732817c..a5d7268 100644
--- a/src/api/companies.js
+++ b/src/api/companies.js
@@ -3,4 +3,5 @@ import { adminHttp } from './http'
 export const getCompanies = () => adminHttp.get('/admin/companies')
 export const createCompany = (data) => adminHttp.post('/admin/companies', data)
 export const updateCompany = (companyKey, data) => adminHttp.patch(`/admin/companies/${companyKey}`, data)
+export const deleteCompany = (companyKey) => adminHttp.delete(`/admin/companies/${companyKey}`)
 export const getCompanySites = (companyKey) => adminHttp.get(`/admin/companies/${companyKey}/sites`)
diff --git a/src/api/members.js b/src/api/members.js
index 5105673..d7a5b10 100644
--- a/src/api/members.js
+++ b/src/api/members.js
@@ -3,6 +3,7 @@ import { adminHttp } from './http'
 export const getMembers = () => adminHttp.get('/admin/members')
 export const upsertMember = (data) => adminHttp.post('/admin/members/upsert', data)
 export const updateMember = (authentikSub, data) => adminHttp.patch(`/admin/members/${authentikSub}`, data)
+export const deleteMember = (authentikSub) => adminHttp.delete(`/admin/members/${authentikSub}`)
 export const resetMemberPassword = (authentikSub) => adminHttp.post(`/admin/members/${authentikSub}/password/reset`)
 export const getMemberPermissionGroups = (authentikSub) => adminHttp.get(`/admin/members/${authentikSub}/permission-groups`)
 export const setMemberPermissionGroups = (authentikSub, groupKeys) =>
diff --git a/src/api/modules.js b/src/api/modules.js
index 2e48669..44ee34d 100644
--- a/src/api/modules.js
+++ b/src/api/modules.js
@@ -3,5 +3,6 @@ import { adminHttp } from './http'
 export const getModules = () => adminHttp.get('/admin/modules')
 export const createModule = (data) => adminHttp.post('/admin/modules', data)
 export const updateModule = (moduleKey, data) => adminHttp.patch(`/admin/modules/${moduleKey}`, data)
+export const deleteModule = (moduleKey) => adminHttp.delete(`/admin/modules/${moduleKey}`)
 export const getModuleGroups = (moduleKey) => adminHttp.get(`/admin/modules/${moduleKey}/groups`)
 export const getModuleMembers = (moduleKey) => adminHttp.get(`/admin/modules/${moduleKey}/members`)
diff --git a/src/api/permission-groups.js b/src/api/permission-groups.js
index 9d5a238..b30d4f2 100644
--- a/src/api/permission-groups.js
+++ b/src/api/permission-groups.js
@@ -3,6 +3,7 @@ import { adminHttp } from './http'
 export const getPermissionGroups = () => adminHttp.get('/admin/permission-groups')
 export const createPermissionGroup = (data) => adminHttp.post('/admin/permission-groups', data)
 export const updatePermissionGroup = (groupKey, data) => adminHttp.patch(`/admin/permission-groups/${groupKey}`, data)
+export const deletePermissionGroup = (groupKey) => adminHttp.delete(`/admin/permission-groups/${groupKey}`)
 export const getPermissionGroupPermissions = (groupKey) => adminHttp.get(`/admin/permission-groups/${groupKey}/permissions`)
 export const getPermissionGroupBindings = (groupKey) => adminHttp.get(`/admin/permission-groups/${groupKey}/bindings`)
 export const updatePermissionGroupBindings = (groupKey, data) =>
diff --git a/src/api/sites.js b/src/api/sites.js
index 7cfa055..9556165 100644
--- a/src/api/sites.js
+++ b/src/api/sites.js
@@ -3,3 +3,4 @@ import { adminHttp } from './http'
 export const getSites = () => adminHttp.get('/admin/sites')
 export const createSite = (data) => adminHttp.post('/admin/sites', data)
 export const updateSite = (siteKey, data) => adminHttp.patch(`/admin/sites/${siteKey}`, data)
+export const deleteSite = (siteKey) => adminHttp.delete(`/admin/sites/${siteKey}`)
diff --git a/src/api/systems.js b/src/api/systems.js
index 3e87b58..486a96f 100644
--- a/src/api/systems.js
+++ b/src/api/systems.js
@@ -3,5 +3,6 @@ import { adminHttp } from './http'
 export const getSystems = () => adminHttp.get('/admin/systems')
 export const createSystem = (data) => adminHttp.post('/admin/systems', data)
 export const updateSystem = (systemKey, data) => adminHttp.patch(`/admin/systems/${systemKey}`, data)
+export const deleteSystem = (systemKey) => adminHttp.delete(`/admin/systems/${systemKey}`)
 export const getSystemGroups = (systemKey) => adminHttp.get(`/admin/systems/${systemKey}/groups`)
 export const getSystemMembers = (systemKey) => adminHttp.get(`/admin/systems/${systemKey}/members`)
diff --git a/src/pages/admin/ApiClientsPage.vue b/src/pages/admin/ApiClientsPage.vue
index 6408fc4..cd3a638 100644
--- a/src/pages/admin/ApiClientsPage.vue
+++ b/src/pages/admin/ApiClientsPage.vue
@@ -31,6 +31,7 @@
           <el-button size="small" :type="row.status === 'active' ? 'danger' : 'success'" @click="toggleStatus(row)">
             {{ row.status === 'active' ? '停用' : '啟用' }}
           </el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row)">刪除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -101,7 +102,7 @@
 import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { Refresh } from '@element-plus/icons-vue'
-import { createApiClient, getApiClients, rotateApiClientKey, updateApiClient } from '@/api/api-clients'
+import { createApiClient, getApiClients, rotateApiClientKey, updateApiClient, deleteApiClient } from '@/api/api-clients'
 
 const items = ref([])
 const loading = ref(false)
@@ -278,5 +279,17 @@ async function toggleStatus(row) {
   }
 }
 
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(`確認刪除 API Client ${row.name}（${row.client_key}）？`, '刪除確認', { type: 'warning' })
+    await deleteApiClient(row.client_key)
+    ElMessage.success('刪除成功')
+    await load()
+  } catch (err) {
+    if (err === 'cancel') return
+    ElMessage.error(err.response?.data?.detail || '刪除失敗')
+  }
+}
+
 onMounted(load)
 </script>
diff --git a/src/pages/admin/CompaniesPage.vue b/src/pages/admin/CompaniesPage.vue
index a473450..faa91b4 100644
--- a/src/pages/admin/CompaniesPage.vue
+++ b/src/pages/admin/CompaniesPage.vue
@@ -13,10 +13,11 @@
       <el-table-column prop="company_key" label="Company Key" width="220" />
       <el-table-column prop="name" label="名稱" min-width="200" />
       <el-table-column prop="status" label="狀態" width="120" />
-      <el-table-column label="操作" width="200">
+      <el-table-column label="操作" width="280">
         <template #default="{ row }">
           <el-button size="small" @click="openEdit(row)">編輯</el-button>
           <el-button size="small" @click="openSites(row)">站台</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row)">刪除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -64,9 +65,9 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { getCompanies, createCompany, updateCompany, getCompanySites } from '@/api/companies'
+import { getCompanies, createCompany, updateCompany, deleteCompany, getCompanySites } from '@/api/companies'
 
 const companies = ref([])
 const loading = ref(false)
@@ -163,5 +164,21 @@ async function openSites(row) {
   }
 }
 
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `確認刪除公司 ${row.name}（${row.company_key}）？此操作會一併刪除旗下站台與相關授權。`,
+      '刪除確認',
+      { type: 'warning' }
+    )
+    await deleteCompany(row.company_key)
+    ElMessage.success('刪除成功')
+    await load()
+  } catch (err) {
+    if (err === 'cancel') return
+    ElMessage.error(err.response?.data?.detail || '刪除失敗')
+  }
+}
+
 onMounted(load)
 </script>
diff --git a/src/pages/admin/MembersPage.vue b/src/pages/admin/MembersPage.vue
index a7d20da..8e9b051 100644
--- a/src/pages/admin/MembersPage.vue
+++ b/src/pages/admin/MembersPage.vue
@@ -24,6 +24,7 @@
         <template #default="{ row }">
           <el-button size="small" @click="openEdit(row)">編輯</el-button>
           <el-button size="small" type="warning" @click="handleResetPassword(row)">重設密碼</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row)">刪除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -71,12 +72,13 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Refresh } from '@element-plus/icons-vue'
 import {
   getMembers,
   upsertMember,
   updateMember,
+  deleteMember,
   resetMemberPassword,
   getMemberPermissionGroups,
   setMemberPermissionGroups
@@ -234,5 +236,21 @@ async function handleResetPassword(row) {
   }
 }
 
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `確認刪除會員 ${row.display_name || row.email || row.username || row.authentik_sub}？`,
+      '刪除確認',
+      { type: 'warning' }
+    )
+    await deleteMember(row.authentik_sub)
+    ElMessage.success('刪除成功')
+    await load()
+  } catch (err) {
+    if (err === 'cancel') return
+    ElMessage.error(err.response?.data?.detail || '刪除失敗')
+  }
+}
+
 onMounted(load)
 </script>
diff --git a/src/pages/admin/ModulesPage.vue b/src/pages/admin/ModulesPage.vue
index db5b1dd..bc6271f 100644
--- a/src/pages/admin/ModulesPage.vue
+++ b/src/pages/admin/ModulesPage.vue
@@ -29,6 +29,7 @@
           <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" type="danger" @click="handleDelete(row)">刪除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -102,9 +103,9 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { getModules, createModule, updateModule, getModuleGroups, getModuleMembers } from '@/api/modules'
+import { getModules, createModule, updateModule, deleteModule, getModuleGroups, getModuleMembers } from '@/api/modules'
 import { getSystems } from '@/api/systems'
 
 const modules = ref([])
@@ -200,6 +201,18 @@ async function handleEdit() {
   }
 }
 
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(`確認刪除模組 ${row.name}（${row.module_key}）？`, '刪除確認', { type: 'warning' })
+    await deleteModule(row.module_key)
+    ElMessage.success('刪除成功')
+    await load()
+  } catch (err) {
+    if (err === 'cancel') return
+    ElMessage.error(err.response?.data?.detail || '刪除失敗')
+  }
+}
+
 async function openRelations(row, tab) {
   relationModuleKey.value = row.module_key
   relationTab.value = tab
diff --git a/src/pages/admin/PermissionGroupsPage.vue b/src/pages/admin/PermissionGroupsPage.vue
index 08f25a2..a782f1d 100644
--- a/src/pages/admin/PermissionGroupsPage.vue
+++ b/src/pages/admin/PermissionGroupsPage.vue
@@ -17,10 +17,11 @@
         <el-table-column prop="group_key" label="Group Key" width="180" />
         <el-table-column prop="name" label="群組名稱" min-width="220" />
         <el-table-column prop="status" label="狀態" width="120" />
-        <el-table-column label="操作" width="220">
+        <el-table-column label="操作" width="300">
           <template #default="{ row }">
             <el-button size="small" @click="openEditGroup(row)">編輯</el-button>
             <el-button size="small" @click="openBindingDialog(row)">設定關聯</el-button>
+            <el-button size="small" type="danger" @click="handleDeleteGroup(row)">刪除</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -128,12 +129,13 @@
 
 <script setup>
 import { ref, reactive, onMounted, computed } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import {
   getPermissionGroups,
   createPermissionGroup,
   updatePermissionGroup,
+  deletePermissionGroup,
   getPermissionGroupPermissions,
   getPermissionGroupBindings,
   updatePermissionGroupBindings
@@ -283,6 +285,18 @@ async function handleEditGroup() {
   }
 }
 
+async function handleDeleteGroup(row) {
+  try {
+    await ElMessageBox.confirm(`確認刪除群組 ${row.name}（${row.group_key}）？`, '刪除確認', { type: 'warning' })
+    await deletePermissionGroup(row.group_key)
+    ElMessage.success('刪除成功')
+    await loadGroups()
+  } catch (err) {
+    if (err === 'cancel') return
+    ElMessage.error(err.response?.data?.detail || '刪除失敗')
+  }
+}
+
 async function openBindingDialog(row) {
   bindingGroupKey.value = row.group_key
   showBindingDialog.value = true
diff --git a/src/pages/admin/SitesPage.vue b/src/pages/admin/SitesPage.vue
index 1b89b21..1eb39ae 100644
--- a/src/pages/admin/SitesPage.vue
+++ b/src/pages/admin/SitesPage.vue
@@ -16,9 +16,10 @@
       </el-table-column>
       <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="200">
         <template #default="{ row }">
           <el-button size="small" @click="openEdit(row)">編輯</el-button>
+          <el-button size="small" type="danger" @click="handleDelete(row)">刪除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -64,9 +65,9 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { getSites, createSite, updateSite } from '@/api/sites'
+import { getSites, createSite, updateSite, deleteSite } from '@/api/sites'
 import { getCompanies } from '@/api/companies'
 
 const sites = ref([])
@@ -166,5 +167,21 @@ async function handleEdit() {
   }
 }
 
+async function handleDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `確認刪除站台 ${row.name}（${row.site_key}）？此操作會清理相關授權。`,
+      '刪除確認',
+      { type: 'warning' }
+    )
+    await deleteSite(row.site_key)
+    ElMessage.success('刪除成功')
+    await load()
+  } catch (err) {
+    if (err === 'cancel') return
+    ElMessage.error(err.response?.data?.detail || '刪除失敗')
+  }
+}
+
 onMounted(load)
 </script>
diff --git a/src/pages/admin/SystemsPage.vue b/src/pages/admin/SystemsPage.vue
index 401d180..a37c1c8 100644
--- a/src/pages/admin/SystemsPage.vue
+++ b/src/pages/admin/SystemsPage.vue
@@ -26,6 +26,7 @@
           <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" type="danger" @click="handleDelete(row)">刪除</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -94,9 +95,9 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
-import { getSystems, createSystem, updateSystem, getSystemGroups, getSystemMembers } from '@/api/systems'
+import { getSystems, createSystem, updateSystem, deleteSystem, getSystemGroups, getSystemMembers } from '@/api/systems'
 
 const systems = ref([])
 const loading = ref(false)
@@ -188,6 +189,18 @@ async function handleEdit() {
   }
 }
 
+async function handleDelete(row) {
+  try {
+    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 || '刪除失敗')
+  }
+}
+
 async function openRelations(row, tab) {
   relationSystemKey.value = row.system_key
   relationTab.value = tab