优化“知识库模块“--基本完善

frontend/src/components/FaqCategoryPanel.vue

@@ -8,22 +8,18 @@
         </PermissionAction>
       </div>
     </div>
-    <el-menu :default-active="activeCategory" @select="onSelect">
+    <el-menu :default-active="activeCategory" @select="onSelect" class="menu">
       <el-menu-item index="">全部</el-menu-item>
       <el-menu-item v-for="c in sortedCategories" :key="c.id" :index="c.id">
-        <span>{{ c.name }}</span>
-        <el-tag v-if="c.study_id" size="small" type="success" class="ml-4">项目</el-tag>
-        <el-tag v-else size="small" class="ml-4">全局</el-tag>
-        <PermissionAction v-if="canEdit(c)" action="faq.edit">
-          <el-button
-            type="text"
-            size="small"
-            style="margin-left: auto"
-            @click.stop="openForm(c)"
-          >
-            编辑
-          </el-button>
-        </PermissionAction>
+        <span class="name" :title="c.name">{{ c.name }}</span>
+        <div v-if="canEdit(c) || canDelete" class="actions">
+          <PermissionAction v-if="canEdit(c)" action="faq.edit">
+            <el-button type="text" size="small" @click.stop="openForm(c)">编辑</el-button>
+          </PermissionAction>
+          <PermissionAction v-if="canDelete" action="faq.edit">
+            <el-button type="text" size="small" class="danger" @click.stop="onDelete(c)">删除</el-button>
+          </PermissionAction>
+        </div>
       </el-menu-item>
     </el-menu>
     <FaqCategoryForm v-model="showForm" :category="editing" :is-admin="isAdmin" @success="emit('refresh')" />
@@ -32,8 +28,10 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
 import FaqCategoryForm from "./FaqCategoryForm.vue";
 import type { FaqCategory } from "../api/faqs";
+import { deleteFaqCategory } from "../api/faqs";
 import { useAuthStore } from "../store/auth";
 import { useStudyStore } from "../store/study";
 import PermissionAction from "./PermissionAction.vue";
@@ -54,6 +52,7 @@ const editing = ref<FaqCategory | null>(null);
 const { can } = usePermission();
 const isAdmin = computed(() => auth.user?.role === "ADMIN");
 const canMaintain = computed(() => can("faq.edit"));
+const canDelete = computed(() => isAdmin.value);
 
 const sortedCategories = computed(() =>
   [...props.categories].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
@@ -75,6 +74,18 @@ const openForm = (cat?: FaqCategory) => {
   editing.value = cat || null;
   showForm.value = true;
 };
+
+const onDelete = async (cat: FaqCategory) => {
+  const ok = await ElMessageBox.confirm(`确认删除分类「${cat.name}」？`, "提示").catch(() => null);
+  if (!ok) return;
+  try {
+    await deleteFaqCategory(cat.id);
+    ElMessage.success("删除成功");
+    emit("refresh");
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "删除失败");
+  }
+};
 </script>
 
 <style scoped>
@@ -88,7 +99,24 @@ const openForm = (cat?: FaqCategory) => {
   padding: 12px;
   border-bottom: 1px solid #ebeef5;
 }
-.ml-4 {
-  margin-left: 4px;
+.menu {
+  max-height: calc(100vh - 240px);
+  overflow: auto;
+}
+.actions {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.name {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.danger {
+  color: #f56c6c;
 }
 </style>