financial_intelligence_system_web README

The project's README from github.com/zhangzf1119/financial_intelligence_system_web. As one markdown file: README.md.

FinSight Enterprise Frontend

FinSight Enterprise Frontend 是 FinSight 企业智能管理平台的前端工程，基于 Vue 3、TypeScript、Vite、Element Plus 构建。项目提供企业后台管理、动态权限菜单、AI 模型对话、RAG 知识库、文件中心、工作流审批、系统监控、日志审计和系统内即时通讯等完整界面能力。

后端工程位于 ../../0java/Financial_Intelligence_System/，后端技术栈为 Spring Boot 3.5、PostgreSQL 16、pgvector、Redis、Flyway、Flowable。

目录

项目特性

技术栈

类型 技术
基础框架 Vue 3.5
编程语言 TypeScript 6
构建工具 Vite 8
UI 组件库 Element Plus 2
状态管理 Pinia
路由 Vue Router
HTTP 请求 Axios、Fetch
实时通信 WebSocket
流式响应 Server-Sent Events
Markdown marked、DOMPurify
图表 ECharts、vue-echarts
BPMN bpmn-js
PDF 预览 pdfjs-dist
Office/文档预览 mammoth、后端 LibreOffice 转 PDF

功能模块

登录与权限

工作台

系统管理

AI 智能中心

文件中心

工作流

即时通讯

目录结构

financial_intelligence_system/
├── index.html
├── package.json
├── package-lock.json
├── vite.config.ts
├── tsconfig.json
├── README.md
├── public/
│   └── favicon.ico
└── src/
    ├── api.ts                         # Axios 请求封装
    ├── main.ts                        # 应用入口
    ├── App.vue
    ├── router/
    │   └── index.ts                   # 路由配置和登录守卫
    ├── stores/
    │   └── auth.ts                    # 登录用户和权限状态
    ├── layouts/
    │   └── AdminLayout.vue            # 企业后台布局
    ├── views/
    │   ├── LoginView.vue              # 登录页
    │   ├── DashboardView.vue          # 工作台
    │   ├── ManagementView.vue         # 用户/角色/部门通用管理页
    │   ├── MenuManagementView.vue     # 菜单管理
    │   ├── ChatView.vue               # AI 模型对话
    │   ├── KnowledgeBaseView.vue      # RAG 知识库
    │   ├── ModelSettingsView.vue      # 模型设置
    │   ├── LogsView.vue               # 日志管理
    │   ├── MonitorView.vue            # 系统监控
    │   ├── FileManagementView.vue     # 文件管理
    │   ├── StorageSettingsView.vue    # 文件设置
    │   └── WorkflowView.vue           # 工作流
    ├── components/
    │   ├── NavMenuTree.vue            # 动态菜单树
    │   ├── ImChatWidget.vue           # 即时通讯悬浮聊天
    │   ├── UniversalFilePreview.vue   # 通用文件预览
    │   ├── KnowledgePdfPreview.vue    # 知识库 PDF 跳页/高亮预览
    │   └── WorkflowDesigner.vue       # BPMN 流程设计器
    └── assets/
        ├── main.css
        ├── jeecg.css
        ├── responsive.css
        ├── ai-chat.css
        ├── knowledge-base.css
        ├── im-chat.css
        ├── file-preview.css
        ├── file-workflow.css
        ├── monitor.css
        └── ...

环境要求

查看当前 Node 版本：

node -v

快速启动

1. 安装依赖

npm install

2. 启动后端

请先启动后端工程：

cd ../../0java/Financial_Intelligence_System
./mvnw spring-boot:run

后端默认地址：

http://localhost:8080

3. 启动前端

npm run dev

前端默认地址：

http://localhost:5173

开发服务器已配置：

server: {
  host: '0.0.0.0',
  port: 5173,
  proxy: {
    '/api': { target: 'http://localhost:8080', changeOrigin: true },
    '/ws': { target: 'ws://localhost:8080', ws: true, changeOrigin: true },
  },
}

因此开发环境中前端请求 /api/** 和 /ws/** 会自动代理到后端。

环境变量

前端默认使用相对路径 /api 访问后端。需要自定义后端地址时，可以创建 .env.local：

VITE_API_BASE=http://localhost:8080/api

说明：

登录账号

默认管理员账号由后端 Flyway 初始化：

用户名：admin
密码：Admin@123

登录成功后会进入工作台。首次公开部署建议立即修改默认密码。

开发说明

常用命令

npm run dev

启动 Vite 开发服务器。

npm run type-check

执行 Vue + TypeScript 类型检查。

npm run build

执行类型检查并构建生产包。

npm run preview

本地预览生产构建结果。

请求封装

请求统一封装在 src/api.ts：

登录状态

登录状态由 src/stores/auth.ts 管理：

页面路由

路由 页面 说明
/login 登录页 用户登录
/dashboard 工作台 首页概览
/system/users 用户管理 用户 CRUD、角色授权、在线状态
/system/roles 角色管理 角色 CRUD、菜单授权
/system/menus 菜单管理 多级菜单、按钮权限
/system/departments 部门管理 部门管理
/ai/chat 模型对话 SSE 流式大模型对话
/ai/knowledge 知识库 RAG 知识库管理
/ai/settings 模型设置 Chat/Embedding 模型配置
/logs/login 登录日志 登录审计
/logs/operation 操作日志 接口操作审计
/logs/chat 模型对话日志 AI 对话日志
/monitor/system 系统监控 服务器/JVM/Redis/数据库监控
/files 文件管理 文件上传、下载、预览
/settings/storage 文件设置 本地/MinIO 存储设置
/workflow/definitions 流程定义 BPMN 流程定义
/workflow/instances 流程实例 流程运行记录
/workflow/tasks 我的待办 审批任务

接口与代理

开发环境请求关系：

Vue 页面
  |
  | /api/**
  v
Vite Dev Server :5173
  |
  | proxy
  v
Spring Boot :8080

WebSocket 请求关系：

Vue 即时通讯
  |
  | /ws/chat?token=...
  v
Vite Dev Server :5173
  |
  | ws proxy
  v
Spring Boot WebSocket :8080

如果手机或局域网设备访问前端，请使用电脑局域网 IP：

http://电脑局域网IP:5173

同时后端 CORS 需要允许该来源。当前后端默认允许 localhost 和 127.0.0.1，如果跨设备访问，需要在后端 SecurityConfig 中增加局域网来源或使用同域反向代理。

AI 与 RAG 前端能力

模型对话

页面：src/views/ChatView.vue

能力：

Markdown 安全

模型回复通过：

避免直接渲染不可信 HTML。

引用来源

RAG 回答返回的来源会在回答下方展示。前端会按文档聚合页码，避免同一份文档重复展示太多来源，例如：

第 1、3、5、7 页 · 部署手册.pdf

知识库管理

页面：src/views/KnowledgeBaseView.vue

能力：

文件预览能力

通用文件预览

组件：src/components/UniversalFilePreview.vue

支持：

知识库 PDF 预览

组件：src/components/KnowledgePdfPreview.vue

能力：

即时通讯能力

组件：src/components/ImChatWidget.vue

能力：

构建部署

生产构建

npm run build

构建产物默认输出到：

dist/

本地预览

npm run preview

Nginx 部署示例

如果前端和后端同域部署，可以让 Nginx 托管 dist，并把 /api 和 /ws 转发给后端。

server {
  listen 80;
  server_name example.com;

  root /data/apps/finsight-frontend/dist;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }

  location /api/ {
    proxy_pass http://127.0.0.1:8080/api/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

  location /ws/ {
    proxy_pass http://127.0.0.1:8080/ws/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
  }
}

跨域部署

如果前端部署在 https://frontend.example.com，后端部署在 https://api.example.com：

VITE_API_BASE=https://api.example.com/api

同时后端需要允许该前端域名跨域访问。

常见问题

1. 登录后接口一直 401

请检查：

2. 页面访问 http://局域网IP:5173 失败

前端 Vite 已配置 host: '0.0.0.0'，正常可以局域网访问。请检查：

3. 前端能打开，但接口请求失败

开发环境默认代理到：

http://localhost:8080

请确认后端正在运行，并且后端端口是 8080。如果后端不在本机或端口不同，请修改 vite.config.ts 的 proxy，或设置 VITE_API_BASE。

4. 大模型回复不是流式显示

请确认：

5. Markdown 没有渲染

模型回复只对 assistant 消息进行 Markdown 渲染。请确认消息角色为 assistant，并且内容不是被后端错误包装成普通文本。

6. PDF 预览空白

请检查：

7. WebSocket 连接失败

请检查：

开源说明

提交 GitHub 前建议补充：

建议 .env.example：

VITE_API_BASE=/api

不要提交：

开源前可执行：

npm run type-check
npm run build

确保类型检查和生产构建通过后再发布。

financial_intelligence_system_web (zhangzf1119/financial_intelligence_system_web)

Searching Database…

197 ·GitHub
Financial_intelligence_system_web
Что это?FinSight Enterprise Frontend — фронтенд на Vue 3 + TypeScript для FinSight, корпоративной платформы интеллектуального управления, предлагающей админ-панель, чат с ИИ-моделями, базу знаний RAG, файловый центр, согласования рабочих процессов, мониторинг системы, аудит логов и обмен сообщениями внутри приложения.
Это отдельное приложение или ему нужен отдельный бэкенд?Это только фронтенд; он должен работать в паре с отдельным бэкенд-проектом на Spring Boot (FinancialIntelligenceSystem), который предоставляет реальный API, базу данных и движок процессов, и в режиме разработки проксирует вызовы /api и /ws на этот бэкенд.
Как его запустить?Выполните npm install для установки зависимостей, сначала запустите бэкенд-проект, затем выполните npm run dev, чтобы запустить dev-сервер Vite, который автоматически проксирует запросы /api и /ws на бэкенд.
Нужна ли конкретная версия Node.js и сначала запущенный бэкенд?Да, требуется Node.js ^22.18.0 или >=24.12.0, и бэкенд (Spring Boot 3.5, PostgreSQL 16 с pgvector, Redis, Flyway, Flowable) должен уже работать, поскольку у этого репозитория нет собственного автономного API.
Есть ли подводные камни перед использованием?Преднастроенная админ-учётная запись приходит из Flyway-миграции бэкенда и должна быть немедленно сменена в любом публичном развёртывании; доступ к приложению с другого устройства в локальной сети требует дополнительной настройки CORS на бэкенде; а стриминговый ИИ-чат требует, чтобы бэкенд и любой обратный прокси не буферизовали SSE-ответ.
Как страница ИИ-чата работает с базой знаний?Чат стримит ответы модели по SSE, безопасно рендерит Markdown/код/таблицы через marked и DOMPurify и может подключать одну или несколько баз знаний RAG, чтобы ответы ссылались на исходные документы, сгруппированные по страницам.
Что умеет встроенный виджет мгновенных сообщений?Плавающий чат-виджет поддерживает личные и групповые чаты по WebSocket с переподключением и heartbeat, сообщениями текст/картинка/файл, счётчиками непрочитанного, индикаторами набора, отзывом сообщений и поиском.
Какие инструменты процессов и согласований включены?В комплекте BPMN-дизайнер на базе bpmn-js плюс страницы для определения процессов Flowable, просмотра запущенных экземпляров и обработки ожидающих задач согласования.
Что покрывают мониторинг системы и журналирование?Страница мониторинга показывает метрики сервера, JVM, диска, Redis и PostgreSQL, а отдельные представления логов отслеживают активность входов, аудиты операций и историю ИИ-чатов с инструментами запросов и очистки.
What are similar projects?financial-intelligence-system, TradingAgents-CN, JeecgBoot, vue-admin-better, ruoyi-vue-pro, gin-vue-admin, vuestic-admin, eladmin
Which topics is it in?bpmn, vue-router, sse, vue3, jwt, admin-dashboard, rbac, chat, enterprise, workflow, vite, websocket
Creator
zhangzf1119
Size
0.1 MB
Stars
197
Updated
CommitSep 16
Age
2mo
Commits · 90 Days