Files
n8n-web/使用说明.md
2025-09-11 14:15:26 +08:00

4.4 KiB
Raw Blame History

使用说明

本项目是一个基于 Vue 3 + Element Plus 的单页面应用SPA集成四个智能助手知识库助手、会议纪要生成、文本信息提取、竞品调研。UI 采用简洁现代风格,并提供 Docker 化的开发运行方式。

  • 主标题云大所AI卓越中心
  • 副标题n8n工作流
  • 访问地址(默认):http://localhost:3000

一、快速开始Docker

  1. 安装 Docker已安装可跳过
  2. 在项目根目录执行:
docker compose up --build -d
  1. 浏览器访问:http://localhost:3000
  2. 停止服务:
docker compose down

二、Webhook 配置

本项目通过环境变量注入四个 Webhook URL并在运行时读取

  • VITE_KNOWLEDGE_BASE_WEBHOOK_URL(知识库助手)
  • VITE_MEETING_MINUTES_WEBHOOK_URL(会议纪要生成)
  • VITE_INVOICE_EXTRACTOR_WEBHOOK_URL(文本信息提取)
  • VITE_COMPETITOR_RESEARCH_WEBHOOK_URL(竞品调研)

默认配置位于 docker-compose.yml

services:
  web:
    environment:
      - VITE_KNOWLEDGE_BASE_WEBHOOK_URL=http://host.docker.internal:5678/webhook/8c4a81b4-176f-4c24-a79d-f406fde0686f
      - VITE_MEETING_MINUTES_WEBHOOK_URL=http://host.docker.internal:5678/webhook/21f77217-2824-4f23-88a6-866197f01504
      - VITE_INVOICE_EXTRACTOR_WEBHOOK_URL=http://host.docker.internal:5678/webhook/4a113d40-fd68-47e3-8b8a-313769be940e
      - VITE_COMPETITOR_RESEARCH_WEBHOOK_URL=http://host.docker.internal:5678/webhook/e6d35c87-cc34-4b44-969b-e584b161749f
  • 若 n8n 与本项目同机运行macOS/Windows 可直接使用 host.docker.internal
  • Linux 如无该主机名,可在 docker-compose.yml 的服务下添加:
extra_hosts:
  - "host.docker.internal:host-gateway"

或改为宿主机的真实 IP。

程序在 env.config.js 中读取上述变量,若缺省将回退到内置默认地址。

三、模块使用指南

1. 知识库助手

  • 左侧为三个文本输入:
    • 知识主题(必填)
    • 关键要点(可选)
    • 详细内容(必填)
  • 右侧为“文件上传占位区”,用于提示可在此整理相关附件(不随请求上传,仅作展示)。
  • 提交按钮已启用“防抖”300ms连续点击不会重复提交。
  • 提交前对文本进行基础 XSS 清洗HTML 转义)。

2. 会议纪要生成

  • 分为三个标签页:
    • 会议议程/时间分段/会议笔记(文本域)
    • 录音文本(文本域)
    • 其他 AI 总结的要点(文本域)
  • 校验:任意一项非空即可提交。
  • 提交按钮已启用“防抖”300ms提交前进行文本清洗。
  • 点击“生成纪要”,仅将三个文本域合并为 JSONPOST 到 Webhook后端返回文件blob 或包含 fileUrl 的 JSON前端自动触发下载。

3. 文本信息提取

  • 大的拖拽/点击上传区,支持多文件。
  • 上传限制:仅支持 PDF / 图片,单文件大小 ≤ 10MB,非法文件将被过滤并提示。
  • 点击“开始提取”,以 multipart/form-data 一次性上传所有文件至 Webhook展示实时上传进度完成后自动下载结果文件。

4. 竞品调研助手

  • 输入产品品类(如:电动牙刷、咖啡机)。
  • 点击“开始调研”,将文本 POST 至 Webhook后端返回报告blob前端自动下载。

四、下载文件名

  • 若后端通过 Content-Disposition 返回文件名,前端会自动解析并使用;否则退回默认文件名。

五、常见问题FAQ

  • 页面打不开:检查容器状态与端口占用,docker compose ps / logs
  • 下载未触发:检查浏览器下载拦截或后端返回格式。
  • 无法访问 n8nLinux 场景下设置 extra_hosts 或使用宿主机 IP。
  • 修改 Webhook编辑 docker-compose.ymlVITE_* 变量并重启。

六、项目结构(节选)

├─ src
│  ├─ api
│  │  └─ services.js
│  ├─ utils
│  │  ├─ download.js
│  │  ├─ timing.js
│  │  └─ sanitize.js
│  ├─ router
│  │  └─ index.js
│  ├─ views
│  │  ├─ KnowledgeBase.vue
│  │  ├─ MeetingMinutes.vue
│  │  ├─ InvoiceExtractor.vue
│  │  └─ CompetitorResearch.vue
│  ├─ App.vue
│  └─ main.js
├─ env.config.js
├─ docker-compose.yml
├─ Dockerfile
├─ vite.config.js
└─ 使用说明.md