Skip to content

[app-platform] 新增前端readme文件 #440

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+235 −0
Open

[app-platform] 新增前端readme文件 #440

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
56d2ca8
[app-platform] 新增前端readme文件
Sep 16, 2025
46a554e
[app-platform] 修改前端readme文件
Sep 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
235 changes: 235 additions & 0 deletions frontend/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,235 @@
## 技术栈

- 框架: React 18.3.1 + TypeScript 5.4.5

- UI库: Ant Design 4.24.13

- 状态管理: Redux Toolkit + React-Redux

- 路由: React Router 5.3.4

- 构建工具: Webpack 5.89.0

- 样式: SCSS + Less

- 国际化: i18next + react-i18next

- 微前端: single-spa-react

## 代码结构

### 根目录配置文件
```plaintext
├── package.json # 项目依赖和脚本配置
├── tsconfig.json # TypeScript配置
├── webpack.common.js # Webpack通用配置 -独立环境
├── webpack.common.single.js # Webpack通用配置 -合并环境
├── webpack.dev.js # 开发环境配置
├── webpack.prod.js # 生产环境配置 --独立环境
├── webpack.prod.single.js #生产环境配置 - 合并环境
└── proxy.conf.json # 代理配置 -本地开发使用
```
### src/ 源代码目录

#### 入口文件
```plaintext
src/
├── index.tsx # 应用入口，支持微前端
├── app.tsx # 主应用组件
└── index.html # HTML模板
```
#### 路由配置
```plaintext
src/router/
└── route.ts # 路由配置，定义所有页面路由
```
#### 样式文件
```plaintext
src/styles/
├── index.scss # 主样式文件
├── common.scss # 通用样式
├── workSpace.scss # 通用样式
├── antStyle.scss # Ant Design样式覆盖
├── appengine-bg.scss # 背景图样式
└── appengine-bg-spa.scss # 背景图样式 -合并环境
```
#### 国际化
```plaintext
src/locale/
├── i18n.ts # 国际化配置
├── zh_CN.json # 中文语言包
└── en_US.json # 英文语言包
```
#### 公共组件

- **这里的组件是公共使用的，会在多个页面都出现，修改时需要注意要兼容所有场景**
- **对于使用达到两次及以上的组件，就可以提取到公共组件里来**
```plaintext
components/
├── layout/ # 布局组件
│ ├── index.tsx # 主布局组件
│ └── style.scoped.scss # 布局样式
├── icons/ # 图标组件 -放一些svg图
│ ├── index.tsx # 图标入口
│ ├── app.tsx # 应用图标
│ ├── base.tsx # 基础图标
│ ├── knowledge-icon.tsx # 知识库图标
│ ├── model.tsx # 模型图标
│ ├── node-icon.tsx # 节点图标
│ ├── plugin.tsx # 插件图标
│ └── table.tsx # 表格图标
├── appCard/ # 应用卡片组件
├── empty/ # 空状态组件
├── file-upload/ # 文件上传组件
├── go-back/ # 返回按钮组件
├── img-upload/ # 图片上传组件
├── pagination/ # 分页组件
├── plugin-card/ # 插件卡片组件
├── table-calendar-search/ # 表格日历搜索
├── table-filter/ # 表格过滤器
├── table-text-search/ # 表格文本搜索
├── timeLine/ # 时间线组件
└── upload/ # 上传组件
```
#### 页面组件
```plaintext
pages/
├── addFlow/ # 工作流编排页面
│ ├── index.tsx # 主页面
│ ├── config.ts # 配置 --给elsa使用，具体可以问镕希
│ ├── components/ # 子组件(16个文件)
│ ├── styles/ # 样式文件(7个)
│ └── utils/ # 工具函数
├── aippIndex/ # 应用配置页面
├── appDetail/ # 应用详情页
│ ├── overview/ # 预览页
│ ├── feedback/ # 反馈页
│ ├── evaluate/ # 评估页
│ └── analyse/ # 分析页
├── appDev/ # 应用开发页
├── apps/ # 应用市场页
├── chatEngineHome/ # 首页应用
├── chatPreview/ # 聊天对话页 -这里比较复杂，拆分组件比较多
│ ├── components/ # 组件列表
│ └── utils/ #公共方法
├── chatRunning/ # 聊天运行页
├── components/ # 页面公共组件 -- 建议后续与公共组件目录合并
├── configForm/ # 配置表单页
│ ├── configUi/ # 应用配置config组件
│ └── index.tsx # 应用配置页
├── detailFlow/ # 工作流详情页
├── helper.ts # 帮助函数
├── httpTool/ # HTTP工具节点
├── intelligent-form/ # 智能表单页
└── plugin/ # 插件页面
```
#### 共享工具
```plaintext
shared/
├── eventsource-parser/ # 事件源解析器 -sse接口使用
├── hooks/ # 自定义Hooks --react机制
├── http/ # HTTP请求模块
│ ├── http.ts # HTTP基础配置
│ ├── httpConfig.ts # HTTP配置
│ ├── httpError.ts # 错误处理
│ ├── aipp.ts # AIPP相关API
│ ├── appBuilder.ts # 应用构建API
│ ├── appDev.ts # 应用开发API
│ ├── appEvaluate.ts # 应用评估API
│ ├── apps.ts # 应用API
│ ├── chat.ts # 聊天API
│ ├── form.ts # 表单API
│ ├── guest.ts # 访客模式API
│ ├── knowledge.ts # 知识库API
│ ├── plugin.ts # 插件API
│ └── sse.ts # SSE相关API
├── storage/ # 本地缓存工具方法
└── utils/ # 通用工具函数
```
#### 状态管理

**这个是用的redux，用来管理一些全局使用或者修改的变量**
**如果有变量是多个组件都使用的，建议放在这里**
```plaintext
store/
├── index.ts # Store入口
├── store.ts # Store配置
├── hook.ts # Redux Hooks
├── appConfig/ # 应用配置状态
├── appInfo/ # 应用信息状态
├── chatStore/ # 聊天状态
├── collection/ # 收藏状态
├── common/ # 通用状态
├── flowTest/ # 流程测试状态
└── toolHttp/ # HTTP工具状态
```
#### 静态资源
```plaintext
assets/
├── icon.js # 图标配置
├── images/ # 图片资源
│ ├── ai/ # AI相关图片
│ ├── appConfig/ # 应用配置图片
│ ├── appdevelop/ # 应用开发图片
│ ├── knowledge/ # 知识库图片
│ ├── model/ # 模型图片
│ ├── pluginModal/ # 插件模态框图片
│ └── source/ # 图片
├── svg/ # SVG图标
└── tinymce/ # 富文本编辑器资源 用的是tinymce
├── lang/ # 语言包
└── skins/ # 皮肤样式
```
#### 通用方法
```plaintext
common/
├── dataUtil.ts # 数据处理工具
└── util.ts # 通用工具函数
```
#### 对话页面插件
```plaintext
plugins/
├── manifest.json # 插件清单
├── plugin.js # 插件脚本
└── plugin.sh # 插件构建脚本
```
## 代码开发

### 本地启动
1. 在fit-framework代码仓，打包elsa
```bash
cd fit-elsa/
npm install
npm run build:debug
cd ../fit-elsa-react
npm install
npm run build
```
2. 在app-platform仓，修改frontend/proxy.conf.json文件
```plaintext
修改接口代理的target为本地调试的后端域名，如http://localhost:8080
示例：
"/api": {
"target": "http://localhost:8080",
"secure": false,
"changeOrigin": true,
"pathRewrite": {
"^/api/jober": "",
"^/api": ""
}
}
```
3. 在app-platform仓，修改frontend/package.json文件

更新elsa依赖包的地址，更新为当前代码仓，相对于本地fit-framework仓中打包elsa文件的路径，以下为示例:
```ts
"@fit-elsa/elsa-core": "file:../../../fitframework-github/fit-framework/framework/elsa/fit-elsa",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Image

该说明文件说明有歧义，无法明确表示，需要更仔细的说明

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

已修改

"@fit-elsa/elsa-react": "file:../../../fitframework-github/fit-framework/framework/elsa/fit-elsa-react"
```
4. 启动代码

app-platform仓的frontend/下执行：
```bash
npm install --force
npm start
```