feat: 支持FAQ Excel导入导出并优化管理端交互

- 新增 FAQ Excel 导入、导出、模板下载接口及导入结果 VO，支持按分类路径+问题 upsert 与逐行容错

- 模板增加填写说明与更宽列宽，导出列与模板保持一致

- 管理端新增导入弹窗与结果展示，FAQ 列表操作栏精简为"添加 + 更多操作"并去除多余外层框

- 修复导出前校验顺序，避免非 FAQ 知识库触发默认分类写入

easyflow-ui-admin/app/src/locales/langs/en-US/documentCollection.json

@@ -112,7 +112,23 @@
     "collectionRequired": "Collection id is required",
     "imageTypeInvalid": "Only JPG/PNG/WEBP/GIF images are supported",
     "imageSizeExceeded": "Image size must be less than 5MB",
-    "imageUploadFailed": "Image upload failed"
+    "imageUploadFailed": "Image upload failed",
+    "import": {
+      "title": "Import FAQ",
+    "uploadTitle": "Drop Excel file here or click to upload",
+    "uploadDesc": "Only .xlsx/.xls files are supported, max 5000 rows in first sheet",
+    "moreActions": "More Actions",
+    "downloadTemplate": "Download Template",
+      "startImport": "Start Import",
+      "importFinished": "Import completed",
+      "resultTitle": "Import Result",
+      "totalCount": "Total",
+      "successCount": "Success",
+      "errorCount": "Failed",
+      "rowNumber": "Row",
+      "reason": "Reason",
+      "selectFileRequired": "Please select an Excel file first"
+    }
   },
   "searchResults": "SearchResults",
   "documentPreview": "DocumentPreview",

easyflow-ui-admin/app/src/locales/langs/zh-CN/documentCollection.json

@@ -112,7 +112,23 @@
     "collectionRequired": "知识库ID不能为空",
     "imageTypeInvalid": "仅支持 JPG/PNG/WEBP/GIF 图片",
     "imageSizeExceeded": "图片大小不能超过5MB",
-    "imageUploadFailed": "图片上传失败"
+    "imageUploadFailed": "图片上传失败",
+    "import": {
+      "title": "导入FAQ",
+    "uploadTitle": "将 Excel 文件拖拽到此处，或点击上传",
+    "uploadDesc": "仅支持 .xlsx/.xls，首个工作表最多5000条",
+    "moreActions": "更多操作",
+    "downloadTemplate": "下载导入模板",
+      "startImport": "开始导入",
+      "importFinished": "导入完成",
+      "resultTitle": "导入结果",
+      "totalCount": "总数",
+      "successCount": "成功数",
+      "errorCount": "失败数",
+      "rowNumber": "行号",
+      "reason": "失败原因",
+      "selectFileRequired": "请先选择Excel文件"
+    }
   },
   "searchResults": "检索结果",
   "documentPreview": "文档预览",

easyflow-ui-admin/app/src/views/ai/documentCollection/FaqImportDialog.vue

@@ -0,0 +1,411 @@
+<script setup lang="ts">
+import type { UploadFile } from 'element-plus';
+
+import { computed, ref, watch } from 'vue';
+
+import { $t } from '@easyflow/locales';
+import { downloadFileFromBlob } from '@easyflow/utils';
+import {
+  CircleCloseFilled,
+  Document,
+  Download,
+  SuccessFilled,
+  Upload,
+  UploadFilled,
+  WarningFilled,
+} from '@element-plus/icons-vue';
+import {
+  ElButton,
+  ElDialog,
+  ElIcon,
+  ElMessage,
+  ElTable,
+  ElTableColumn,
+  ElUpload,
+} from 'element-plus';
+
+import { api } from '#/api/request';
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false,
+  },
+  knowledgeId: {
+    type: String,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'success']);
+
+const fileList = ref<any[]>([]);
+const currentFile = ref<File | null>(null);
+const submitLoading = ref(false);
+const downloadLoading = ref(false);
+const importResult = ref<any>(null);
+
+const hasErrors = computed(() => (importResult.value?.errorCount || 0) > 0);
+const selectedFileName = computed(() => currentFile.value?.name || '');
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (!visible) {
+      resetDialog();
+    }
+  },
+);
+
+const closeDialog = () => {
+  emit('update:modelValue', false);
+};
+
+const resetDialog = () => {
+  fileList.value = [];
+  currentFile.value = null;
+  submitLoading.value = false;
+  downloadLoading.value = false;
+  importResult.value = null;
+};
+
+const onFileChange = (uploadFile: UploadFile) => {
+  currentFile.value = uploadFile.raw || null;
+  fileList.value = uploadFile.raw ? [uploadFile] : [];
+  return false;
+};
+
+const onFileRemove = () => {
+  currentFile.value = null;
+};
+
+const clearSelectedFile = () => {
+  currentFile.value = null;
+  fileList.value = [];
+};
+
+const downloadTemplate = async () => {
+  if (!props.knowledgeId) {
+    ElMessage.warning($t('documentCollection.faq.collectionRequired'));
+    return;
+  }
+  downloadLoading.value = true;
+  try {
+    const blob = await api.download(
+      `/api/v1/faqItem/downloadImportTemplate?collectionId=${props.knowledgeId}`,
+    );
+    downloadFileFromBlob({
+      fileName: 'faq_import_template.xlsx',
+      source: blob,
+    });
+  } finally {
+    downloadLoading.value = false;
+  }
+};
+
+const handleImport = async () => {
+  if (!currentFile.value) {
+    ElMessage.warning($t('documentCollection.faq.import.selectFileRequired'));
+    return;
+  }
+  const formData = new FormData();
+  formData.append('file', currentFile.value);
+  formData.append('collectionId', props.knowledgeId);
+  submitLoading.value = true;
+  try {
+    const res = await api.postFile('/api/v1/faqItem/importExcel', formData, {
+      timeout: 10 * 60 * 1000,
+    });
+    if (res.errorCode === 0) {
+      importResult.value = res.data;
+      ElMessage.success($t('documentCollection.faq.import.importFinished'));
+      emit('success');
+    }
+  } finally {
+    submitLoading.value = false;
+  }
+};
+</script>
+
+<template>
+  <ElDialog
+    :model-value="modelValue"
+    width="min(980px, 92vw)"
+    :title="$t('documentCollection.faq.import.title')"
+    :close-on-click-modal="true"
+    @close="closeDialog"
+  >
+    <div class="faq-import-dialog">
+      <ElUpload
+        :file-list="fileList"
+        drag
+        action="#"
+        accept=".xlsx,.xls"
+        :auto-upload="false"
+        :on-change="onFileChange"
+        :on-remove="onFileRemove"
+        :limit="1"
+        :show-file-list="false"
+        class="faq-upload-area"
+      >
+        <div class="upload-box flex flex-col items-center justify-center p-8 text-center">
+          <ElIcon class="text-4xl text-gray-400 mb-4"><UploadFilled /></ElIcon>
+          <div class="upload-title text-[15px] font-semibold text-[var(--el-text-color-primary)] mb-2">
+            {{ $t('documentCollection.faq.import.uploadTitle') }}
+          </div>
+          <div class="upload-desc text-[13px] text-[var(--el-text-color-secondary)]">
+            {{ $t('documentCollection.faq.import.uploadDesc') }}
+          </div>
+        </div>
+      </ElUpload>
+
+      <div v-if="selectedFileName" class="selected-file-card">
+        <div class="selected-file-main">
+          <ElIcon class="selected-file-icon"><Document /></ElIcon>
+          <div class="selected-file-name" :title="selectedFileName">
+            {{ selectedFileName }}
+          </div>
+        </div>
+        <ElButton
+          link
+          :icon="CircleCloseFilled"
+          class="remove-file-btn"
+          @click="clearSelectedFile"
+        />
+      </div>
+
+      <div v-if="importResult" class="result-wrap">
+        <div class="result-head">
+          <div class="result-title-wrap">
+            <ElIcon
+              v-if="hasErrors"
+              class="result-state-icon text-[var(--el-color-warning)]"
+            >
+              <WarningFilled />
+            </ElIcon>
+            <ElIcon v-else class="result-state-icon text-[var(--el-color-success)]">
+              <SuccessFilled />
+            </ElIcon>
+            <span class="result-title-text">
+              {{ $t('documentCollection.faq.import.resultTitle') }}
+            </span>
+          </div>
+        </div>
+        <div class="result-stats">
+          <div class="stat-item">
+            <div class="stat-label">{{ $t('documentCollection.faq.import.totalCount') }}</div>
+            <div class="stat-value">{{ importResult.totalCount || 0 }}</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">{{ $t('documentCollection.faq.import.successCount') }}</div>
+            <div class="stat-value success-text">{{ importResult.successCount || 0 }}</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">{{ $t('documentCollection.faq.import.errorCount') }}</div>
+            <div class="stat-value" :class="hasErrors ? 'danger-text' : ''">
+              {{ importResult.errorCount || 0 }}
+            </div>
+          </div>
+        </div>
+
+        <ElTable
+          v-if="hasErrors"
+          :data="importResult.errorRows || []"
+          size="small"
+          class="result-error-table"
+        >
+          <ElTableColumn
+            prop="rowNumber"
+            :label="$t('documentCollection.faq.import.rowNumber')"
+            width="100"
+          />
+          <ElTableColumn
+            prop="categoryPath"
+            :label="$t('documentCollection.faq.categoryPath')"
+            min-width="170"
+            show-overflow-tooltip
+          />
+          <ElTableColumn
+            prop="question"
+            :label="$t('documentCollection.faq.question')"
+            min-width="180"
+            show-overflow-tooltip
+          />
+          <ElTableColumn
+            prop="reason"
+            :label="$t('documentCollection.faq.import.reason')"
+            min-width="220"
+            show-overflow-tooltip
+          />
+        </ElTable>
+      </div>
+    </div>
+    <template #footer>
+      <div class="action-row action-row-footer">
+        <ElButton
+          type="primary"
+          plain
+          :icon="Download"
+          :disabled="downloadLoading"
+          :loading="downloadLoading"
+          @click="downloadTemplate"
+        >
+          {{ $t('documentCollection.faq.import.downloadTemplate') }}
+        </ElButton>
+        <ElButton
+          type="primary"
+          :icon="Upload"
+          @click="handleImport"
+          :loading="submitLoading"
+          :disabled="submitLoading"
+        >
+          {{ $t('documentCollection.faq.import.startImport') }}
+        </ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped>
+.faq-import-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.selected-file-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 10px;
+  background: var(--el-fill-color-blank);
+  padding: 10px 12px;
+}
+
+.selected-file-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.selected-file-icon {
+  color: var(--el-text-color-secondary);
+  font-size: 18px;
+}
+
+.selected-file-name {
+  color: var(--el-text-color-primary);
+  font-size: 14px;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.remove-file-btn {
+  color: var(--el-text-color-placeholder);
+}
+
+.remove-file-btn:hover {
+  color: var(--el-color-danger);
+}
+
+.result-wrap {
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 12px;
+  padding: 14px;
+  background: var(--el-fill-color-light);
+}
+
+.result-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.result-title-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.result-state-icon {
+  font-size: 16px;
+}
+
+.result-title-text {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.result-stats {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.stat-item {
+  background: var(--el-fill-color-blank);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+
+.stat-label {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1;
+  margin-bottom: 8px;
+}
+
+.stat-value {
+  color: var(--el-text-color-primary);
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.success-text {
+  color: var(--el-color-success);
+}
+
+.danger-text {
+  color: var(--el-color-danger);
+}
+
+.result-error-table {
+  margin-top: 12px;
+}
+
+.action-row {
+  display: flex;
+  gap: 10px;
+}
+
+.action-row-footer {
+  justify-content: flex-end;
+}
+
+:deep(.faq-upload-area .el-upload-dragger) {
+  padding: 0;
+  border-radius: 10px;
+  background-color: var(--el-fill-color-blank);
+  transition: all 0.3s;
+}
+
+:deep(.faq-upload-area .el-upload-dragger:hover) {
+  border-color: var(--el-color-primary);
+  background-color: var(--el-color-primary-light-9);
+}
+
+@media (max-width: 768px) {
+  .result-stats {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

easyflow-ui-admin/app/src/views/ai/documentCollection/FaqTable.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, ref } from 'vue';
 
 import { $t } from '@easyflow/locales';
+import { downloadFileFromBlob } from '@easyflow/utils';
 
 import {
   Bottom,
@@ -12,6 +13,8 @@ import {
   FolderAdd,
   MoreFilled,
   Plus,
+  RefreshRight,
+  Search,
   Top,
   Upload,
 } from '@element-plus/icons-vue';
@@ -22,17 +25,18 @@ import {
   ElDropdownMenu,
   ElMessage,
   ElMessageBox,
+  ElInput,
   ElTable,
   ElTableColumn,
   ElTree,
 } from 'element-plus';
 
 import { api } from '#/api/request';
-import HeaderSearch from '#/components/headerSearch/HeaderSearch.vue';
 import PageData from '#/components/page/PageData.vue';
 
 import FaqCategoryDialog from './FaqCategoryDialog.vue';
 import FaqEditDialog from './FaqEditDialog.vue';
+import FaqImportDialog from './FaqImportDialog.vue';
 
 const props = defineProps({
   knowledgeId: {
@@ -53,20 +57,14 @@ const searchKeyword = ref('');
 const categoryTree = ref<any[]>([]);
 const categoryParentOptions = ref<any[]>([]);
 const categoryActionLoading = ref(false);
+const importDialogVisible = ref(false);
+const templateDownloadLoading = ref(false);
+const exportLoading = ref(false);
 
 const baseQueryParams = ref({
   collectionId: props.knowledgeId,
 });
 
-const headerButtons = [
-  {
-    key: 'add',
-    text: $t('button.add'),
-    icon: Plus,
-    type: 'primary',
-  },
-];
-
 const treeData = computed(() => [
   {
     id: 'all',
@@ -134,8 +132,13 @@ const hasCategoryId = (nodes: any[], id: string): boolean => {
   return false;
 };
 
-const handleSearch = (keyword: string) => {
-  searchKeyword.value = keyword || '';
+const handleSearch = () => {
+  searchKeyword.value = searchKeyword.value.trim();
+  refreshList();
+};
+
+const handleResetSearch = () => {
+  searchKeyword.value = '';
   refreshList();
 };
 
@@ -150,9 +153,57 @@ const openAddDialog = () => {
   dialogVisible.value = true;
 };
 
-const handleButtonClick = (event: any) => {
-  if (event.key === 'add') {
-    openAddDialog();
+const downloadImportTemplate = async () => {
+  if (templateDownloadLoading.value) {
+    return;
+  }
+  templateDownloadLoading.value = true;
+  try {
+    const blob = await api.download(
+      `/api/v1/faqItem/downloadImportTemplate?collectionId=${props.knowledgeId}`,
+    );
+    downloadFileFromBlob({
+      fileName: 'faq_import_template.xlsx',
+      source: blob,
+    });
+  } finally {
+    templateDownloadLoading.value = false;
+  }
+};
+
+const exportFaqExcel = async () => {
+  if (exportLoading.value) {
+    return;
+  }
+  exportLoading.value = true;
+  try {
+    const blob = await api.download(
+      `/api/v1/faqItem/exportExcel?collectionId=${props.knowledgeId}`,
+    );
+    downloadFileFromBlob({
+      fileName: 'faq_export.xlsx',
+      source: blob,
+    });
+  } finally {
+    exportLoading.value = false;
+  }
+};
+
+const handleImportSuccess = () => {
+  refreshList();
+};
+
+const handleMoreActionCommand = (command: string) => {
+  if (command === 'import') {
+    importDialogVisible.value = true;
+    return;
+  }
+  if (command === 'downloadTemplate') {
+    downloadImportTemplate();
+    return;
+  }
+  if (command === 'export') {
+    exportFaqExcel();
   }
 };
 
@@ -740,11 +791,58 @@ onMounted(() => {
 
       <div class="faq-content-pane">
         <div class="faq-header">
-          <HeaderSearch
-            :buttons="headerButtons"
-            @search="handleSearch"
-            @button-click="handleButtonClick"
-          />
+          <div class="faq-toolbar">
+            <div class="faq-search-actions">
+              <ElInput
+                v-model="searchKeyword"
+                clearable
+                class="faq-search-input"
+                :placeholder="$t('common.searchPlaceholder')"
+                @keyup.enter="handleSearch"
+              />
+              <ElButton type="primary" :icon="Search" @click="handleSearch">
+                {{ $t('button.query') }}
+              </ElButton>
+              <ElButton :icon="RefreshRight" @click="handleResetSearch">
+                {{ $t('button.reset') }}
+              </ElButton>
+            </div>
+
+            <div class="faq-primary-actions">
+              <ElButton type="primary" :icon="Plus" @click="openAddDialog">
+                {{ $t('button.add') }}
+              </ElButton>
+              <ElDropdown
+                trigger="click"
+                @command="handleMoreActionCommand"
+              >
+                <ElButton :icon="MoreFilled">
+                  {{ $t('documentCollection.faq.import.moreActions') }}
+                </ElButton>
+                <template #dropdown>
+                  <ElDropdownMenu>
+                    <ElDropdownItem command="import" :icon="Upload">
+                      {{ $t('button.import') }}
+                    </ElDropdownItem>
+                    <ElDropdownItem
+                      command="downloadTemplate"
+                      :icon="Download"
+                      :disabled="templateDownloadLoading"
+                    >
+                      {{ $t('documentCollection.faq.import.downloadTemplate') }}
+                    </ElDropdownItem>
+                    <ElDropdownItem
+                      command="export"
+                      :icon="Download"
+                      :disabled="exportLoading"
+                    >
+                      {{ $t('button.export') }}
+                    </ElDropdownItem>
+                  </ElDropdownMenu>
+                </template>
+              </ElDropdown>
+            </div>
+          </div>
         </div>
 
         <PageData
@@ -817,6 +915,12 @@ onMounted(() => {
       :parent-options="categoryParentOptions"
       @submit="saveCategory"
     />
+
+    <FaqImportDialog
+      v-model="importDialogVisible"
+      :knowledge-id="knowledgeId"
+      @success="handleImportSuccess"
+    />
   </div>
 </template>
 
@@ -898,6 +1002,65 @@ onMounted(() => {
   margin-bottom: 12px;
 }
 
+.faq-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 2px 0;
+}
+
+.faq-search-actions {
+  flex: 1;
+  min-width: 260px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.faq-search-input {
+  width: min(460px, 100%);
+}
+
+.faq-primary-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+:deep(.faq-toolbar .el-button) {
+  height: 38px;
+  padding: 0 16px;
+  border-radius: 10px;
+  font-weight: 500;
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease,
+    color 0.2s ease;
+}
+
+:deep(.faq-toolbar .el-button:not(.el-button--primary):hover) {
+  color: hsl(var(--primary));
+  border-color: hsl(var(--primary) / 45%);
+  background: hsl(var(--primary) / 7%);
+}
+
+:deep(.faq-search-input .el-input__wrapper) {
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+:deep(.faq-search-input .el-input__wrapper:hover) {
+  box-shadow: 0 0 0 1px hsl(var(--primary) / 30%) inset;
+}
+
+:deep(.faq-search-input .el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px hsl(var(--primary) / 60%) inset;
+}
+
 :deep(
     .faq-category-tree > .el-tree-node > .el-tree-node__content > .el-tree-node__expand-icon
   ) {
@@ -940,4 +1103,20 @@ onMounted(() => {
   padding-top: 14px;
   padding-bottom: 14px;
 }
+
+@media (max-width: 1360px) {
+  .faq-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .faq-search-actions,
+  .faq-primary-actions {
+    width: 100%;
+  }
+
+  .faq-primary-actions {
+    justify-content: flex-start;
+  }
+}
 </style>