前端工程结构

目录结构

根目录结构

innospots-ui/
├── .env                    # 环境变量配置
├── .eslintrc.js           # ESLint 代码规范配置
├── .gitignore             # Git 忽略文件配置
├── .prettierrc            # Prettier 代码格式化配置
├── README.md              # 项目说明文档
├── package.json           # 项目依赖和脚本配置
├── tsconfig.json          # TypeScript 配置
├── pom.xml               # Maven 配置文件（用于 WebJar 打包）
├── config/               # 项目配置目录
│   ├── DefaultSettings.ts # 默认设置配置
│   ├── config.ts         # 主配置文件
│   ├── routes.ts         # 路由配置
│   ├── proxy.ts          # 代理配置
│   └── themes/           # 主题配置
├── mock/                 # Mock 数据
├── public/               # 静态资源目录
│   ├── icons/            # 图标文件
│   ├── oauth/            # OAuth 相关静态文件
│   └── static/           # 其他静态资源
└── src/                  # 源码目录

关键文件说明

package.json: 项目依赖管理和构建脚本配置
pom.xml: Maven 配置，用于将前端构建产物打包成 WebJar 格式
config/routes.ts: 应用路由配置，定义了所有页面的路由规则
config/config.ts: UMI 框架主配置文件
.env: 环境变量配置文件
tsconfig.json: TypeScript 编译配置

src 源码目录模块

核心模块

📁 pages/ - 页面组件

业务页面组件目录，包含所有功能页面：

App/ - 应用管理相关页面
Workflow/ - 工作流管理页面
DataImport/ - 数据导入页面
Metadata/ - 元数据管理页面
Organization/ - 组织管理页面
System/ - 系统配置页面
Schedule/ - 调度管理页面
Tasks/ - 任务管理页面
Login/ - 登录页面
403.tsx, 404.tsx - 错误页面

📁 components/ - 公共组件

可复用的 UI 组件库：

AceCodeEditor/ - 代码编辑器组件
Chat/ - 聊天组件
DataSourceModal/ - 数据源配置弹窗
Expression/ - 表达式编辑器
IconSelect/ - 图标选择器
ListTable/ - 列表表格组件
PageDesign/ - 页面设计器
RichTextBox/ - 富文本编辑器
UserAvatar/ - 用户头像组件
widget/ - 小部件组件集合

📁 services/ - 服务层

API 接口服务模块，与后端接口对接：

Account.ts - 账户相关接口
DataSource.ts - 数据源接口
Workflow.ts - 工作流接口
User.ts - 用户管理接口
App.ts - 应用管理接口
RBAC.ts - 权限控制接口

📁 models/ - 数据模型

状态管理和数据模型定义：

User.ts - 用户数据模型
App.ts - 应用数据模型
Workflow.ts - 工作流数据模型
DataSource.ts - 数据源模型
RBAC.ts - 权限模型

📁 layouts/ - 布局组件

页面布局组件：

BasicLayout/ - 基础布局（包含侧边栏、头部）
FullScreenLayout/ - 全屏布局
SeniorLayout/ - 高级布局

支撑模块

📁 common/ - 公共模块

constants/ - 常量定义
hooks/ - 自定义 React Hooks
request/ - 请求封装
types/ - TypeScript 类型定义
utils/ - 工具函数

📁 assets/ - 静态资源

images/ - 图片资源
js/ - JavaScript 文件
less/ - 样式文件

📁 config/ - 配置文件

DefaultSettings.ts - 默认配置
tokens.ts - 令牌配置
globalActions/ - 全局操作配置

📁 utils/ - 工具模块

format.ts - 格式化工具函数

📄 核心文件

app.ts - 应用入口配置
access.ts - 权限控制配置
global.less - 全局样式

项目依赖

核心框架依赖

模块名称	说明
@umijs/max	UMI 企业级前端开发框架
react	React 用户界面构建库
react-dom	React DOM 渲染库
antd	Ant Design 企业级 UI 组件库
@ant-design/icons	Ant Design 图标库
@ant-design/compatible	Ant Design 兼容性组件

图表与可视化

模块名称	说明
echarts	Apache ECharts 图表库
echarts-for-react	ECharts 的 React 封装
echarts-wordcloud	ECharts 词云插件
@antv/x6	AntV X6 图编辑引擎
@antv/x6-react-components	X6 React 组件
@antv/x6-react-shape	X6 React 图形

编辑器组件

模块名称	说明
ace-builds	Ace 代码编辑器
react-ace	Ace 编辑器的 React 封装
braft-editor	富文本编辑器
braft-extensions	富文本编辑器扩展
braft-finder	富文本编辑器查找器
braft-utils	富文本编辑器工具

表单与数据处理

模块名称	说明
form-render	动态表单渲染器
fr-generator	表单生成器
json-rules-engine	JSON 规则引擎
@microlink/react-json-view	JSON 数据查看器

国际化与本地化

模块名称	说明
i18next	国际化框架
i18next-browser-languagedetector	浏览器语言检测
react-i18next	i18next 的 React 集成
flag-icons	国旗图标库

UI 增强组件

模块名称	说明
react-color	颜色选择器
react-grid-layout	网格布局组件
react-split-pane	分割面板组件
react-sortablejs	拖拽排序组件
sortablejs	拖拽排序库
re-resizable	可调整大小组件
@udidu/timeline	时间线组件

文档与内容处理

模块名称	说明
react-markdown	Markdown 渲染器
react-syntax-highlighter	语法高亮组件
rehype-document	HTML 文档处理
rehype-highlight	代码高亮处理
rehype-raw	原始 HTML 处理
rehype-starry-night	星空主题高亮
rehype-stringify	HTML 字符串化
remark-gfm	GitHub 风格 Markdown
remark-parse	Markdown 解析
remark-rehype	Markdown 到 HTML 转换
remark-toc	目录生成

工具库

模块名称	说明
lodash	JavaScript 工具库
lodash-decorators	Lodash 装饰器
lodash.debounce	防抖函数
lodash.isequal	深度比较
moment	日期时间处理库
moment-timezone	时区处理
classnames	CSS 类名工具
immutability-helper	不可变数据助手
omit.js	对象属性过滤

网络与通信

模块名称	说明
umi-request	UMI 请求库
@microsoft/fetch-event-source	服务器发送事件客户端
ahooks	React Hooks 工具库

安全与加密

模块名称	说明
jsencrypt	RSA 加密库
js-base64	Base64 编码解码

其他功能

模块名称	说明
qiankun	微前端框架
copy-text-to-clipboard	剪贴板复制
html2pdf.js	HTML 转 PDF
print-js	打印功能
sql-formatter	SQL 格式化
tributejs	提及功能
@multiavatar/multiavatar	头像生成器
react-helmet	文档头部管理
react-helmet-async	异步头部管理
react-dev-inspector	开发调试工具
react-icons	React 图标库

开发依赖

模块名称	说明
typescript	TypeScript 编译器
@types/react	React 类型定义
@types/react-dom	React DOM 类型定义
prettier	代码格式化工具
husky	Git hooks 工具
lint-staged	暂存文件检查
less	Less CSS 预处理器

目录结构​

根目录结构​

关键文件说明​

src 源码目录模块​

核心模块​

📁 pages/ - 页面组件​

📁 components/ - 公共组件​

📁 services/ - 服务层​

📁 models/ - 数据模型​

📁 layouts/ - 布局组件​

支撑模块​

📁 common/ - 公共模块​

📁 assets/ - 静态资源​

📁 config/ - 配置文件​

📁 utils/ - 工具模块​

📄 核心文件​

项目依赖​

核心框架依赖​

图表与可视化​

编辑器组件​

表单与数据处理​

国际化与本地化​

UI 增强组件​

文档与内容处理​

工具库​

网络与通信​

安全与加密​

其他功能​

开发依赖​

目录结构

根目录结构

关键文件说明

src 源码目录模块

核心模块

📁 pages/ - 页面组件

📁 components/ - 公共组件

📁 services/ - 服务层

📁 models/ - 数据模型

📁 layouts/ - 布局组件

支撑模块

📁 common/ - 公共模块

📁 assets/ - 静态资源

📁 config/ - 配置文件

📁 utils/ - 工具模块

📄 核心文件

项目依赖

核心框架依赖

图表与可视化

编辑器组件

表单与数据处理

国际化与本地化

UI 增强组件

文档与内容处理

工具库

网络与通信

安全与加密

其他功能

开发依赖