管理后台前后端逻辑、UI美化

frontend/src/views/admin/Sites.vue

@@ -8,7 +8,7 @@
         </div>
         <el-button type="primary" @click="openCreate">{{ TEXT.common.actions.add }}{{ TEXT.modules.adminSites.siteLabel }}</el-button>
       </div>
-      <el-table :data="sites" v-loading="loading" stripe>
+      <el-table :data="sites" v-loading="loading" stripe :row-class-name="siteRowClass">
         <el-table-column prop="name" :label="TEXT.common.fields.siteName" min-width="180" />
         <el-table-column prop="city" :label="TEXT.common.fields.city" width="140" />
         <el-table-column prop="pi_name" :label="TEXT.modules.adminSites.piLabel" width="160" />
@@ -24,11 +24,11 @@
         </el-table-column>
         <el-table-column :label="TEXT.common.fields.status" width="120">
           <template #default="scope">
-            <el-tag type="success" v-if="scope.row.is_active">{{ TEXT.common.actions.enable }}</el-tag>
-            <el-tag type="danger" v-else>{{ TEXT.common.actions.disable }}</el-tag>
+            <el-tag type="success" v-if="scope.row.is_active">已解锁</el-tag>
+            <el-tag type="danger" v-else>已锁定</el-tag>
           </template>
         </el-table-column>
-        <el-table-column :label="TEXT.common.labels.actions" width="220" fixed="right">
+        <el-table-column :label="TEXT.common.labels.actions" width="260" fixed="right">
           <template #default="scope">
             <el-button link type="primary" size="small" @click="openEdit(scope.row)">{{ TEXT.common.actions.edit }}</el-button>
             <el-button
@@ -37,7 +37,16 @@
               size="small"
               @click="toggleSite(scope.row)"
             >
-              {{ scope.row.is_active ? TEXT.common.actions.disable : TEXT.common.actions.enable }}
+              {{ scope.row.is_active ? "锁定" : "解锁" }}
+            </el-button>
+            <el-button
+              v-if="isAdmin"
+              link
+              type="danger"
+              size="small"
+              @click="confirmDelete(scope.row)"
+            >
+              {{ TEXT.common.actions.delete }}
             </el-button>
           </template>
         </el-table-column>
@@ -60,7 +69,7 @@ import { computed, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { fetchStudyDetail } from "../../api/studies";
-import { fetchSites, updateSite } from "../../api/sites";
+import { deleteSite, fetchSites, updateSite } from "../../api/sites";
 import { fetchUsers } from "../../api/users";
 import { listMembers } from "../../api/members";
 import SiteForm from "./SiteForm.vue";
@@ -81,6 +90,7 @@ const members = ref<any[]>([]);
 const loading = ref(false);
 const formVisible = ref(false);
 const editingSite = ref<Site | null>(null);
+const isAdmin = computed(() => auth.user?.role === "ADMIN");
 
 const loadProject = async () => {
   if (!projectId.value) return;
@@ -96,7 +106,7 @@ const loadSites = async () => {
   if (!projectId.value) return;
   loading.value = true;
   try {
-    const { data } = await fetchSites(projectId.value);
+    const { data } = await fetchSites(projectId.value, { include_inactive: true });
     sites.value = Array.isArray(data) ? data : (data as any).items || [];
   } catch (e: any) {
     ElMessage.error(e?.response?.data?.message || TEXT.modules.adminSites.loadFailed);
@@ -147,6 +157,8 @@ const contactLabel = (row: any) => {
 
 const phoneText = (row: any) => row?.phone || row?.contact_phone || TEXT.common.fallback;
 
+const siteRowClass = ({ row }: { row: Site }) => (row.is_active ? "" : "row-inactive");
+
 const openCreate = () => {
   loadUsers();
   loadMembers();
@@ -179,15 +191,16 @@ const toggleSite = async (row: Site) => {
     return;
   }
   if (row.is_active) {
-    const ok = await ElMessageBox.confirm(TEXT.modules.adminSites.disableConfirm, TEXT.modules.adminSites.disableTitle, {
+    const ok = await ElMessageBox.confirm("锁定后该中心将不可编辑，但数据会保留，确认锁定？", "锁定中心", {
       type: "warning",
       confirmButtonText: TEXT.common.actions.confirm,
+      cancelButtonText: TEXT.common.actions.cancel,
     }).catch(() => null);
     if (!ok) return;
   }
   try {
     await updateSite(projectId.value, row.id, { is_active: !row.is_active });
-    ElMessage.success(row.is_active ? TEXT.modules.adminSites.disableSuccess : TEXT.modules.adminSites.enableSuccess);
+    ElMessage.success(row.is_active ? "已锁定" : "已解锁");
     loadSites();
     logAudit("SITE_STATUS_CHANGED", {
       targetId: row.id,
@@ -209,6 +222,42 @@ const toggleSite = async (row: Site) => {
   }
 };
 
+const confirmDelete = async (row: Site) => {
+  if (!projectId.value) return;
+  if (!isAdmin.value) {
+    ElMessage.warning("仅管理员可删除中心");
+    return;
+  }
+  const message = "删除该中心会删除中心所有数据，请谨慎操作。输入“确认删除”继续。";
+  const result = await ElMessageBox.prompt(message, "危险操作", {
+    type: "warning",
+    confirmButtonText: TEXT.common.actions.confirm,
+    cancelButtonText: TEXT.common.actions.cancel,
+    inputPlaceholder: "确认删除",
+    inputPattern: /^确认删除$/,
+    inputErrorMessage: "请输入“确认删除”",
+  }).catch(() => null);
+  if (!result) return;
+  try {
+    await deleteSite(projectId.value, row.id);
+    ElMessage.success(TEXT.common.messages.deleteSuccess);
+    loadSites();
+    logAudit("SITE_DELETED", {
+      targetId: row.id,
+      targetName: row.name,
+      severity: "high",
+    });
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || TEXT.common.messages.deleteFailed);
+    logAudit("SITE_DELETED", {
+      targetId: row.id,
+      targetName: row.name,
+      severity: "warning",
+      reason: e?.response?.data?.message,
+    });
+  }
+};
+
 onMounted(async () => {
   await Promise.all([loadProject(), loadUsers(), loadMembers()]);
   loadSites();
@@ -229,4 +278,16 @@ onMounted(async () => {
   color: #666;
   margin-top: 4px;
 }
+
+</style>
+
+<style>
+.row-inactive td {
+  color: var(--ctms-text-secondary);
+  background-color: #fff7d6 !important;
+}
+
+.row-inactive .el-tag {
+  opacity: 0.6;
+}
 </style>