refactor: 重构faq与document页

- 将筛选器提取为单独的组件ProductFilters

app/components/shared/ProductFilter.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="question-category">
+    <el-row :gutter="12">
+      <el-col :span="8">
+        <span class="select-label">产品分类</span>
+        <el-select
+          v-model="model.selectedType"
+          placeholder="选择产品类型"
+          clearable
+        >
+          <el-option
+            v-for="type in productTypeOptions"
+            :key="type.id"
+            :label="type.name"
+            :value="type.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="8">
+        <span class="select-label">产品系列</span>
+        <el-select
+          v-model="model.selectedProduct"
+          placeholder="选择系列产品"
+          clearable
+        >
+          <el-option
+            v-for="product in productOptions"
+            :key="product.id"
+            :label="product.name"
+            :value="product.id"
+          />
+        </el-select>
+      </el-col>
+
+      <el-col :span="8">
+        <span class="select-label">关键词</span>
+        <el-input
+          v-model="model.keyword"
+          placeholder="输入关键词..."
+          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<{ id: number; name: string }>,
+      default: () => [],
+    },
+    productOptions: {
+      type: Array as () => Array<{ id: number; name: string }>,
+      default: () => [],
+    },
+  });
+
+  const model = defineModel<{
+    keyword: string;
+    selectedType: number | null;
+    selectedProduct: number | null;
+  }>();
+</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>

app/pages/support/documents.vue

@@ -9,50 +9,12 @@
         <h1 class="page-title">{{ $t('navigation.documents') }}</h1>
         <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
       </div>
-      <div class="document-category">
-        <el-row :gutter="12">
-          <el-col :span="8">
-            <span class="select-label">产品分类</span>
-            <el-select
-              v-model="selectedType"
-              placeholder="选择产品类型"
-              clearable
-            >
-              <el-option
-                v-for="type in productTypeOptions"
-                :key="type.id"
-                :label="type.name"
-                :value="type.id"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="8">
-            <span class="select-label">产品系列</span>
-            <el-select
-              v-model="selectedProduct"
-              placeholder="选择系列产品"
-              clearable
-            >
-              <el-option
-                v-for="product in productOptions"
-                :key="product.id"
-                :label="product.name"
-                :value="product.id"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="8">
-            <span class="select-label">关键词</span>
-            <el-input
-              v-model="keyword"
-              placeholder="输入关键词..."
-              clearable
-              :prefix-icon="Search"
-            />
-          </el-col>
-        </el-row>
-      </div>
       <div class="page-content">
+        <product-filter
+          v-model="filters"
+          :product-type-options="productTypeOptions"
+          :product-options="productOptions"
+        />
         <document-list :documents="filteredDocuments" />
       </div>
     </div>
@@ -60,8 +22,6 @@
 </template>
 
 <script setup lang="ts">
-  import { Search } from '@element-plus/icons-vue';
-
   const localePath = useLocalePath();
   const breadcrumbItems = [
     { label: $t('navigation.home'), to: localePath('/') },
@@ -69,17 +29,18 @@
     { label: $t('navigation.documents') },
   ];
 
+  const filters = reactive({
+    selectedType: null as number | null,
+    selectedProduct: null as number | null,
+    keyword: '',
+  });
+
   const { data, pending, error } = await useDocumentList();
 
   const documents = computed(
     () => data?.value.map((item) => toDocumentListView(item)) ?? []
   );
 
-  const keyword = ref('');
-
-  const selectedType = ref<number | null>(null);
-  const selectedProduct = ref<number | null>(null);
-
   const productTypeOptions = computed(() => {
     const types: DocumentListProductType[] = [];
     documents.value.forEach((doc: DocumentListView) => {
@@ -95,13 +56,13 @@
   });
 
   const productOptions = computed(() => {
-    if (!selectedType.value) return [];
+    if (!filters.selectedType) return [];
     const products: DocumentListProduct[] = [];
 
     documents.value.forEach((doc: DocumentListView) => {
       doc.products?.forEach((product: DocumentListProduct) => {
         if (
-          product.type.id === selectedType.value &&
+          product.type.id === filters.selectedType &&
           !products.some((item) => item.id === product.id)
         ) {
           products.push(product);
@@ -114,29 +75,32 @@
 
   const filteredDocuments = computed(() =>
     documents.value.filter((doc: DocumentListView) => {
-      const matchProduct = selectedProduct.value
+      const matchProduct = filters.selectedProduct
         ? doc.products?.some(
             (product: DocumentListProduct) =>
-              product.id === selectedProduct.value
+              product.id === filters.selectedProduct
           )
-        : selectedType.value
+        : filters.selectedType
           ? doc.products?.some(
               (product: DocumentListProduct) =>
-                product.type?.id === selectedType.value
+                product.type?.id === filters.selectedType
             )
           : true;
 
-      const matchKeyword = keyword.value
+      const matchKeyword = filters.keyword
-        ? doc.title && doc.title.includes(keyword.value)
+        ? doc.title && doc.title.includes(filters.keyword)
         : true;
 
       return matchProduct && matchKeyword;
     })
   );
 
-  watch(selectedType, () => {
+  watch(
-    selectedProduct.value = null;
+    () => filters.selectedType,
-  });
+    () => {
+      filters.selectedProduct = null;
+    }
+  );
 
   watch(documents, (value) => {
     console.log(value);

app/pages/support/faq.vue

@@ -10,50 +10,13 @@
         <app-breadcrumb class="breadcrumb" :items="breadcrumbItems" />
       </div>
 
-      <div class="question-category">
-        <el-row :gutter="12">
-          <el-col :span="8">
-            <span class="select-label">产品分类</span>
-            <el-select
-              v-model="selectedType"
-              placeholder="选择产品类型"
-              clearable
-            >
-              <el-option
-                v-for="type in productTypeOptions"
-                :key="type.id"
-                :label="type.name"
-                :value="type.id"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="8">
-            <span class="select-label">产品系列</span>
-            <el-select
-              v-model="selectedProduct"
-              placeholder="选择系列产品"
-              clearable
-            >
-              <el-option
-                v-for="product in productOptions"
-                :key="product.id"
-                :label="product.name"
-                :value="product.id"
-              />
-            </el-select>
-          </el-col>
-          <el-col :span="8">
-            <span class="select-label">关键词</span>
-            <el-input
-              v-model="keyword"
-              placeholder="输入关键词..."
-              clearable
-              :prefix-icon="Search"
-            />
-          </el-col>
-        </el-row>
-      </div>
       <div class="page-content">
+        <product-filter
+          v-model="filters"
+          :product-type-options="productTypeOptions"
+          :product-options="productOptions"
+        />
+
         <question-list :questions="filteredQuestions" />
       </div>
     </div>
@@ -61,10 +24,14 @@
 </template>
 
 <script setup lang="ts">
-  import { Search } from '@element-plus/icons-vue';
-
   const localePath = useLocalePath();
 
+  const filters = reactive({
+    selectedType: null as number | null,
+    selectedProduct: null as number | null,
+    keyword: '',
+  });
+
   const breadcrumbItems = [
     { label: $t('navigation.home'), to: localePath('/') },
     { label: $t('navigation.support'), to: localePath('/support') },
@@ -77,11 +44,6 @@
     () => data.value.map((item) => toQuestionListView(item)) ?? null
   );
 
-  const keyword = ref('');
-
-  const selectedType = ref<number | null>(null);
-  const selectedProduct = ref<number | null>(null);
-
   const productTypeOptions = computed(() => {
     const types: QuestionListProductType[] = [];
     questions.value.forEach((q: QuestionListView) => {
@@ -96,12 +58,12 @@
   });
 
   const productOptions = computed(() => {
-    if (!selectedType.value) return [];
+    if (!filters.selectedType) return [];
     const products: QuestionListProduct[] = [];
     questions.value.forEach((q: QuestionListView) => {
       q.products.forEach((product: QuestionListProduct) => {
         if (
-          product.type.id === selectedType.value &&
+          product.type.id === filters.selectedType &&
           !products.some((p) => p.id === product.id)
         ) {
           products.push(product);
@@ -113,30 +75,33 @@
 
   const filteredQuestions = computed(() => {
     return questions.value.filter((question: QuestionListView) => {
-      const matchProduct = selectedProduct.value
+      const matchProduct = filters.selectedProduct
         ? question.products?.some(
             (product: QuestionListProduct) =>
-              product.id === selectedProduct.value
+              product.id === filters.selectedProduct
           )
-        : selectedType.value
+        : filters.selectedType
           ? question.products?.some(
               (product: QuestionListProduct) =>
-                product.type.id === selectedType.value
+                product.type.id === filters.selectedType
             )
           : true;
 
-      const matchKeyword = keyword.value
+      const matchKeyword = filters.keyword
-        ? (question.title && question.title.includes(keyword.value)) ||
+        ? (question.title && question.title.includes(filters.keyword)) ||
-          (question.content && question.content.includes(keyword.value))
+          (question.content && question.content.includes(filters.keyword))
         : true;
 
       return matchProduct && matchKeyword;
     });
   });
 
-  watch(selectedType, () => {
+  watch(
-    selectedProduct.value = null;
+    () => filters.selectedType,
-  });
+    () => {
+      filters.selectedProduct = null;
+    }
+  );
 
   watch(data, (newVal) => {
     console.log('useAsyncData updated:', newVal);
@@ -171,24 +136,7 @@
     margin-left: auto;
   }
 
-  .question-category {
-    padding: 0rem 2rem;
-    gap: 4px;
-    margin-bottom: 0.5rem;
-  }
-
   .page-content {
     padding: 1rem 2rem 2rem;
   }
-
-  .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>