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…

196 ·GitHub
Financial_intelligence_system_web
What is this?FinSight Enterprise Frontend is the Vue 3 + TypeScript frontend for FinSight, an enterprise intelligence management platform offering an admin dashboard, AI model chat, a RAG knowledge base, a file center, workflow approvals, system monitoring, log auditing and in-app messaging.
Is this a standalone app or does it need a separate backend?It is only the frontend; it must be paired with a separate Spring Boot backend project (FinancialIntelligenceSystem) that provides the actual API, database and workflow engine, and it proxies /api and /ws calls to that backend in development.
How do I get it running?Run npm install to install dependencies, start the backend project first, then run npm run dev to launch the Vite dev server, which proxies /api and /ws requests to the backend automatically.
Do I need a specific Node.js version and the backend running first?Yes, Node.js ^22.18.0 or >=24.12.0 is required, and the backend (Spring Boot 3.5, PostgreSQL 16 with pgvector, Redis, Flyway, Flowable) must already be running since this repo has no standalone API of its own.
Any gotchas before using it?The seeded admin account comes from the backend's Flyway migration and should be changed immediately in any public deployment; accessing the app from another device on the LAN needs extra backend CORS configuration; and streaming AI chat requires the backend and any reverse proxy to not buffer the SSE response.
How does the AI chat page work with the knowledge base?The chat view streams model replies over SSE, renders Markdown/code/tables safely via marked and DOMPurify, and can mount one or more RAG knowledge bases so answers cite source documents grouped by page.
What can the built-in instant messaging widget do?A floating chat widget supports single and group chats over WebSocket with reconnect/heartbeat, text/image/file messages, unread counts, typing indicators, message recall and search.
What workflow/approval tooling is included?It ships a BPMN designer built on bpmn-js plus pages for defining Flowable process definitions, viewing running instances, and handling pending approval tasks.
What does the system monitoring and logging cover?The monitor page reports server, JVM, disk, Redis and PostgreSQL metrics, while separate log views track login activity, operation audits and AI chat history with query and cleanup tools.
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
196
Updated
CommitSep 16
Age
2mo
Commits · 90 Days