Step F10：FAQ / 知识库

frontend/src/views/FaqDetail.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="page">
+    <el-card v-loading="loading">
+      <div class="header">
+        <div>
+          <h3>{{ item?.question }}</h3>
+          <el-tag size="small">{{ item?.version ? "v" + item.version : "" }}</el-tag>
+        </div>
+        <div>
+          <el-tag type="info">{{ categoryName }}</el-tag>
+          <el-tag :type="item?.is_active ? 'success' : 'info'" class="ml-8">
+            {{ item?.is_active ? "启用" : "停用" }}
+          </el-tag>
+        </div>
+      </div>
+      <el-divider />
+      <div class="content">
+        <pre>{{ item?.answer }}</pre>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import { ElMessage } from "element-plus";
+import { fetchFaqItem, fetchFaqCategories } from "../api/faqs";
+
+const route = useRoute();
+const item = ref<any>(null);
+const loading = ref(false);
+const categories = ref<any[]>([]);
+
+const categoryName = computed(() => {
+  const cat = categories.value.find((c) => c.id === item.value?.category_id);
+  return cat ? cat.name : item.value?.category_id;
+});
+
+const loadData = async () => {
+  const id = route.params.itemId as string;
+  loading.value = true;
+  try {
+    const [{ data: catData }, { data: faqData }] = await Promise.all([
+      fetchFaqCategories(),
+      fetchFaqItem(id),
+    ]);
+    categories.value = catData.items || catData || [];
+    item.value = faqData;
+  } catch (e: any) {
+    ElMessage.error(e?.response?.data?.message || "加载失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+onMounted(() => {
+  loadData();
+});
+</script>
+
+<style scoped>
+.page {
+  padding: 16px;
+}
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.content {
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+.ml-8 {
+  margin-left: 8px;
+}
+</style>