From a4dc28fc9707b81a58a15069d71c11057c1728e1 Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Wed, 3 Dec 2025 16:59:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=97=AE=E9=A2=98=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=97=AE=E9=A2=98=E7=B1=BB=E5=9E=8B=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 功能添加：添加问题筛选功能
- 组件更改：将product-filter改为question-filter
- 文本添加：i18n文本添加
---
 .../pages/support/QuestionFilter.vue          | 112 ++++++++++++++++++
 app/pages/support/faq.vue                     |  39 ++++--
 i18n/locales/en.json                          |   7 +-
 i18n/locales/zh.json                          |   7 +-
 4 files changed, 155 insertions(+), 10 deletions(-)
 create mode 100644 app/components/pages/support/QuestionFilter.vue

diff --git a/app/components/pages/support/QuestionFilter.vue b/app/components/pages/support/QuestionFilter.vue
new file mode 100644
index 0000000..b6420e6
--- /dev/null
+++ b/app/components/pages/support/QuestionFilter.vue
@@ -0,0 +1,112 @@
+<template>
+  <div class="question-category">
+    <el-row class="hide-on-mobile" :gutter="12">
+      <el-col :span="12" :xs="12">
+        <span class="select-label">{{
+          $t('product-filter.product-type')
+        }}</span>
+        <el-select
+          v-model="model.selectedProductType"
+          :placeholder="$t('product-filter.select-product-type')"
+          clearable
+        >
+          <el-option
+            v-for="type in productTypeOptions"
+            :key="type.id"
+            :label="type.name"
+            :value="type.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="12">
+        <span class="select-label">{{
+          $t('product-filter.product-model')
+        }}</span>
+        <el-select
+          v-model="model.selectedProduct"
+          :placeholder="$t('product-filter.select-product-model')"
+          clearable
+        >
+          <el-option
+            v-for="product in productOptions"
+            :key="product.id"
+            :label="product.name"
+            :value="product.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="24">
+        <span class="select-label">
+          {{ $t('product-filter.question-type') }}
+        </span>
+        <el-select
+          v-model="model.selectedQuestionType"
+          :placeholder="$t('product-filter.select-question-type')"
+          clearable
+        >
+          <el-option
+            v-for="questionType in questionTypeOptions"
+            :key="questionType.id"
+            :label="questionType.name"
+            :value="questionType.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="12" :xs="24">
+        <span class="select-label">{{ $t('product-filter.keyword') }}</span>
+        <el-input
+          v-model="model.keyword"
+          :placeholder="$t('product-filter.enter-keyword')"
+          clearable
+          :prefix-icon="Search"
+        />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { Search } from '@element-plus/icons-vue';
+
+  defineProps({
+    productTypeOptions: {
+      type: Array as () => Array<QuestionListProductType>,
+      default: () => [],
+    },
+    productOptions: {
+      type: Array as () => Array<QuestionListProduct>,
+      default: () => [],
+    },
+    questionTypeOptions: {
+      type: Array as () => Array<QuestionTypeView>,
+      default: () => [],
+    },
+  });
+
+  const model = defineModel<{
+    selectedProduct: string | null;
+    selectedProductType: string | null;
+    selectedQuestionType: string | null;
+    keyword: string;
+  }>();
+</script>
+
+<style scoped>
+  .question-category {
+    margin-bottom: 1rem;
+  }
+
+  .select-label {
+    color: var(--el-text-color-secondary);
+    font-size: 0.9rem;
+  }
+
+  :deep(.el-select__wrapper),
+  :deep(.el-input__wrapper) {
+    height: 40px;
+    font-size: 0.9rem;
+  }
+</style>
diff --git a/app/pages/support/faq.vue b/app/pages/support/faq.vue
index df53b44..e403f68 100644
--- a/app/pages/support/faq.vue
+++ b/app/pages/support/faq.vue
@@ -11,10 +11,11 @@
       </div>
 
       <div class="page-content">
-        <product-filter
+        <question-filter
           v-model="filters"
           :product-type-options="productTypeOptions"
           :product-options="productOptions"
+          :question-type-options="questionTypeOptions"
         />
 
         <question-list :questions="paginatedQuestions" />
@@ -37,8 +38,9 @@
   const route = useRoute();
 
   const filters = reactive({
-    selectedType: null as string | null,
+    selectedQuestionType: null as string | null,
     selectedProduct: null as string | null,
+    selectedProductType: null as string | null,
     keyword: '',
   });
 
@@ -57,6 +59,23 @@
 
   const { data: questions, pending, error } = await useQuestionList();
 
+  const questionTypeOptions = computed(() => {
+    const types: QuestionTypeView[] = [];
+    questions.value.forEach((q: QuestionListView) => {
+      if (!types.some((t) => t.id === q.type.id)) {
+        if (q.type.id === '-1') {
+          types.push({
+            id: '-1',
+            name: $t('product-filter.misc'),
+          });
+        } else {
+          types.push(q.type);
+        }
+      }
+    });
+    return types;
+  });
+
   const productTypeOptions = computed(() => {
     const types: QuestionListProductType[] = [];
     questions.value.forEach((q: QuestionListView) => {
@@ -71,12 +90,12 @@
   });
 
   const productOptions = computed(() => {
-    if (!filters.selectedType) return [];
+    if (!filters.selectedProductType) return [];
     const products: QuestionListProduct[] = [];
     questions.value.forEach((q: QuestionListView) => {
       q.products.forEach((product: QuestionListProduct) => {
         if (
-          product.type.id === filters.selectedType &&
+          product.type.id === filters.selectedProductType &&
           !products.some((p) => p.id === product.id)
         ) {
           products.push(product);
@@ -98,14 +117,18 @@
             (product: QuestionListProduct) =>
               product.id === filters.selectedProduct
           )
-        : filters.selectedType
+        : filters.selectedProductType
           ? question.products?.some(
               (product: QuestionListProduct) =>
-                product.type.id === filters.selectedType
+                product.type.id === filters.selectedProductType
             )
           : true;
 
-      return matchProduct;
+      const matchQuestionType = filters.selectedQuestionType
+        ? question.type.id === filters.selectedQuestionType
+        : true;
+
+      return matchProduct && matchQuestionType;
     });
   });
 
@@ -138,7 +161,7 @@
   );
 
   watch(
-    () => filters.selectedType,
+    () => filters.selectedProductType,
     () => {
       filters.selectedProduct = null;
     }
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 1112bc2..ad02c64 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -79,7 +79,12 @@
     "keyword": "Keyword",
     "select-product-type": "Select product type",
     "select-product-model": "Select product model",
-    "enter-keyword": "Enter keyword"
+    "enter-keyword": "Enter keyword",
+    "question-type": "Question Type",
+    "select-question-type": "Select question type",
+    "document-type": "Document Type",
+    "select-document-type": "Select document type",
+    "misc": "Misc"
   },
   "document-meta": {
     "size": "Size",
diff --git a/i18n/locales/zh.json b/i18n/locales/zh.json
index 50f27ce..f07808a 100644
--- a/i18n/locales/zh.json
+++ b/i18n/locales/zh.json
@@ -78,7 +78,12 @@
     "keyword": "关键词",
     "select-product-type": "选择产品类型",
     "select-product-model": "选择产品系列",
-    "enter-keyword": "输入关键词"
+    "enter-keyword": "输入关键词",
+    "question-type": "问题类型",
+    "select-question-type": "选择问题类型",
+    "document-type": "文档类型",
+    "select-document-type": "选择文档类型",
+    "misc": "其他"
   },
   "document-meta": {
     "size": "大小",