From d472b8410ede81df5b478847c34c391611d5e807 Mon Sep 17 00:00:00 2001
From: Cheng Zhou <zhoucheng857@gmail.com>
Date: Mon, 8 Jun 2026 13:38:09 +0800
Subject: [PATCH] fix(faq): repair category schema and icons

---
 .../20260608_01_add_faq_category_icon.py      | 36 ++++++++++++
 database/init.sql                             |  1 +
 frontend/index.html                           |  3 +-
 frontend/src/components/FaqCategoryForm.vue   |  3 +-
 .../src/components/FaqCategoryManager.vue     | 16 ++---
 frontend/src/components/FaqCategoryPanel.vue  | 20 ++-----
 frontend/src/components/FaqIcon.vue           | 58 +++++++++++++++++++
 frontend/src/views/Faq.vue                    |  4 +-
 8 files changed, 115 insertions(+), 26 deletions(-)
 create mode 100644 backend/alembic/versions/20260608_01_add_faq_category_icon.py
 create mode 100644 frontend/src/components/FaqIcon.vue

diff --git a/backend/alembic/versions/20260608_01_add_faq_category_icon.py b/backend/alembic/versions/20260608_01_add_faq_category_icon.py
new file mode 100644
index 00000000..b1f372c8
--- /dev/null
+++ b/backend/alembic/versions/20260608_01_add_faq_category_icon.py
@@ -0,0 +1,36 @@
+"""add faq category icon column
+
+Revision ID: 20260608_01
+Revises: 20260529_04
+Create Date: 2026-06-08 14:30:00.000000
+
+"""
+
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+
+revision: str = "20260608_01"
+down_revision: Union[str, None] = "20260529_04"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def _column_exists(inspector: sa.Inspector, table_name: str, column_name: str) -> bool:
+    return any(column["name"] == column_name for column in inspector.get_columns(table_name))
+
+
+def upgrade() -> None:
+    bind = op.get_bind()
+    inspector = sa.inspect(bind)
+    if "faq_categories" in inspector.get_table_names() and not _column_exists(inspector, "faq_categories", "icon"):
+        op.add_column("faq_categories", sa.Column("icon", sa.String(length=30), nullable=True))
+
+
+def downgrade() -> None:
+    bind = op.get_bind()
+    inspector = sa.inspect(bind)
+    if "faq_categories" in inspector.get_table_names() and _column_exists(inspector, "faq_categories", "icon"):
+        op.drop_column("faq_categories", "icon")
diff --git a/database/init.sql b/database/init.sql
index 764874de..e8ba0149 100644
--- a/database/init.sql
+++ b/database/init.sql
@@ -376,6 +376,7 @@ CREATE TABLE IF NOT EXISTS public.faq_categories (
     name character varying(100) NOT NULL,
     description text,
     sort_order integer NOT NULL DEFAULT 0,
+    icon character varying(30),
     is_active boolean NOT NULL DEFAULT true,
     created_at timestamp with time zone NOT NULL DEFAULT now(),
     updated_at timestamp with time zone NOT NULL DEFAULT now(),
diff --git a/frontend/index.html b/frontend/index.html
index b6573b8e..fbb2a5bf 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -5,7 +5,6 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="icon" href="data:," />
-  <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
   <title>CTMS</title>
 </head>
 
@@ -14,4 +13,4 @@
   <script type="module" src="/src/main.ts"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/frontend/src/components/FaqCategoryForm.vue b/frontend/src/components/FaqCategoryForm.vue
index dcb01735..57424a68 100644
--- a/frontend/src/components/FaqCategoryForm.vue
+++ b/frontend/src/components/FaqCategoryForm.vue
@@ -41,7 +41,7 @@
                 'icon-option--used': isIconUsedByOther(icon.cls),
               }]"
               @click="selectIcon(icon.cls)"
-            ><i :class="['fas', icon.cls]"></i></span>
+            ><FaqIcon :icon="icon.cls" /></span>
           </div>
         </el-form-item>
       </div>
@@ -62,6 +62,7 @@
 <script setup lang="ts">
 import { computed, reactive, ref, watch } from "vue";
 import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
+import FaqIcon from "./FaqIcon.vue";
 import { createFaqCategory, updateFaqCategory, deleteFaqCategory } from "../api/faqs";
 import { useStudyStore } from "../store/study";
 import { TEXT, requiredMessage } from "../locales";
diff --git a/frontend/src/components/FaqCategoryManager.vue b/frontend/src/components/FaqCategoryManager.vue
index 8ff39676..d36f8057 100644
--- a/frontend/src/components/FaqCategoryManager.vue
+++ b/frontend/src/components/FaqCategoryManager.vue
@@ -14,7 +14,7 @@
         <div class="editor-title-row">
           <div class="editor-title">分类管理</div>
           <el-button size="small" class="header-add-btn" @click="addCategory">
-            <i class="fas fa-plus"></i> 新增
+            <el-icon><Plus /></el-icon> 新增
           </el-button>
         </div>
       </div>
@@ -32,10 +32,10 @@
             <span class="sort-num">{{ idx + 1 }}</span>
             <div class="sort-arrows">
               <button class="sort-btn" :disabled="idx === 0" @click="moveUp(idx)" title="上移">
-                <i class="fas fa-chevron-up"></i>
+                <el-icon><ArrowUp /></el-icon>
               </button>
               <button class="sort-btn" :disabled="idx === editableCategories.length - 1" @click="moveDown(idx)" title="下移">
-                <i class="fas fa-chevron-down"></i>
+                <el-icon><ArrowDown /></el-icon>
               </button>
             </div>
           </div>
@@ -48,8 +48,8 @@
           >
             <template #reference>
               <div class="row-icon" :class="{ 'row-icon--selected': cat.icon }" title="选择图标">
-                <i v-if="cat.icon" :class="['fas', cat.icon]"></i>
-                <span v-else class="row-icon-placeholder"><i class="fas fa-icons"></i></span>
+                <FaqIcon v-if="cat.icon" :icon="cat.icon" />
+                <span v-else class="row-icon-placeholder"><Grid /></span>
               </div>
             </template>
             <div class="icon-popover-grid">
@@ -59,7 +59,7 @@
                 :title="icon.label"
                 :class="['mini-icon', { 'mini-icon--active': cat.icon === icon.cls }]"
                 @click="selectIconFor(cat, icon.cls)"
-              ><i :class="['fas', icon.cls]"></i></span>
+              ><FaqIcon :icon="icon.cls" /></span>
             </div>
           </el-popover>
 
@@ -77,7 +77,7 @@
             class="row-delete"
             type="button"
             @click.stop="removeCategory(cat)"
-          ><i class="fas fa-trash"></i></button>
+          ><el-icon><Delete /></el-icon></button>
         </div>
       </div>
     </div>
@@ -96,6 +96,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
+import { ArrowDown, ArrowUp, Delete, Grid, Plus } from "@element-plus/icons-vue";
+import FaqIcon from "./FaqIcon.vue";
 import { createFaqCategory, updateFaqCategory, deleteFaqCategory } from "../api/faqs";
 import type { FaqCategory } from "../api/faqs";
 import { useStudyStore } from "../store/study";
diff --git a/frontend/src/components/FaqCategoryPanel.vue b/frontend/src/components/FaqCategoryPanel.vue
index 333a4b55..6c1c2bfd 100644
--- a/frontend/src/components/FaqCategoryPanel.vue
+++ b/frontend/src/components/FaqCategoryPanel.vue
@@ -8,13 +8,13 @@
     </div>
     <el-menu :default-active="activeCategory" @select="onSelect" class="menu">
       <el-menu-item index="">
-        <span class="cat-icon"><i class="fas fa-th-large"></i></span>
+        <span class="cat-icon"><FaqIcon icon="fa-th-large" /></span>
         <span class="name">{{ TEXT.common.labels.all }}</span>
         <span class="cat-count">{{ totalFaqCount }}</span>
       </el-menu-item>
       <el-menu-item v-for="c in sortedCategories" :key="c.id" :index="c.id">
         <span class="cat-icon">
-          <i v-if="c.icon" :class="['fas', c.icon]"></i>
+          <FaqIcon v-if="c.icon" :icon="c.icon" />
           <span v-else>{{ c.name.slice(0, 1) }}</span>
         </span>
         <span class="name" :title="c.name">{{ c.name }}</span>
@@ -27,10 +27,9 @@
 
 <script setup lang="ts">
 import { computed, ref } from "vue";
+import FaqIcon from "./FaqIcon.vue";
 import FaqCategoryManager from "./FaqCategoryManager.vue";
 import type { FaqCategory } from "../api/faqs";
-import { useAuthStore } from "../store/auth";
-import { useStudyStore } from "../store/study";
 import { usePermission } from "../utils/permission";
 import { TEXT } from "../locales";
 
@@ -41,13 +40,9 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(["update:modelValue", "refresh"]);
 
-const auth = useAuthStore();
-const study = useStudyStore();
-
 const showForm = ref(false);
 
 const { can } = usePermission();
-const isAdmin = computed(() => !!auth.user?.is_admin);
 const canCreateCategory = computed(() => can("faq.category.create"));
 const sortedCategories = computed(() =>
   [...props.categories].sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0))
@@ -75,11 +70,6 @@ const onSelect = (id: string) => {
   emit("update:modelValue", id);
 };
 
-const activeIcons = (excludeId?: string) =>
-  sortedCategories.value
-    .filter((c) => c.id !== excludeId && c.icon)
-    .map((c) => c.icon as string);
-
 const openManager = () => {
   showForm.value = true;
 };
@@ -146,8 +136,10 @@ const openManager = () => {
   font-size: 13px;
   font-weight: 800;
 }
-.cat-icon i {
+.cat-icon :deep(svg) {
   font-size: 13px;
+  width: 1em;
+  height: 1em;
 }
 .menu :deep(.el-menu-item.is-active) .cat-icon {
   background: #d7ebff;
diff --git a/frontend/src/components/FaqIcon.vue b/frontend/src/components/FaqIcon.vue
new file mode 100644
index 00000000..a25827b4
--- /dev/null
+++ b/frontend/src/components/FaqIcon.vue
@@ -0,0 +1,58 @@
+<template>
+  <component :is="iconComponent" />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type { Component } from "vue";
+import {
+  Calendar,
+  Camera,
+  Collection,
+  DocumentChecked,
+  Filter,
+  FirstAidKit,
+  Flag,
+  Grid,
+  Help,
+  List,
+  Management,
+  Memo,
+  More,
+  OfficeBuilding,
+  Reading,
+  ScaleToOriginal,
+  Sell,
+  SetUp,
+  User,
+} from "@element-plus/icons-vue";
+
+const props = defineProps<{
+  icon?: string | null;
+}>();
+
+const iconMap: Record<string, Component> = {
+  "fa-th-large": Grid,
+  "fa-ruler-combined": ScaleToOriginal,
+  "fa-calendar-check": Calendar,
+  "fa-filter": Filter,
+  "fa-flag-checkered": Flag,
+  "fa-capsules": FirstAidKit,
+  "fa-prescription-bottle": Sell,
+  "fa-vial": SetUp,
+  "fa-heartbeat": Help,
+  "fa-pills": FirstAidKit,
+  "fa-file-medical": DocumentChecked,
+  "fa-camera": Camera,
+  "fa-notes-medical": Memo,
+  "fa-clipboard-list": List,
+  "fa-syringe": FirstAidKit,
+  "fa-flask": Management,
+  "fa-book-medical": Reading,
+  "fa-user-md": User,
+  "fa-hospital": OfficeBuilding,
+  "fa-ellipsis-h": More,
+};
+
+const iconComponent = computed(() => iconMap[props.icon || ""] || Collection);
+</script>
diff --git a/frontend/src/views/Faq.vue b/frontend/src/views/Faq.vue
index b553eb92..04fc932a 100644
--- a/frontend/src/views/Faq.vue
+++ b/frontend/src/views/Faq.vue
@@ -2,7 +2,7 @@
   <div class="page ctms-page-shell page--flush medical-consult-page">
     <div class="page-bg-dots"></div>
     <section class="faq-hero">
-      <h1><i class="fas fa-book-medical hero-title-icon"></i>项目知识库</h1>
+      <h1><el-icon class="hero-title-icon"><Collection /></el-icon>项目知识库</h1>
       <div class="hero-tools">
         <el-autocomplete
           v-model="keyword"
@@ -74,7 +74,7 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
 import { ElMessage } from "element-plus";
-import { Plus, Search } from "@element-plus/icons-vue";
+import { Collection, Plus, Search } from "@element-plus/icons-vue";
 import { fetchFaqCategories, fetchFaqItems } from "../api/faqs";
 import FaqCategoryPanel from "../components/FaqCategoryPanel.vue";
 import FaqList from "../components/FaqList.vue";