第一次
This commit is contained in:
ZhuJW
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
|||||||
|
node_modules
|
||||||
23
Dockerfile
Normal file
23
Dockerfile
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/node:18-alpine AS build
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package*.json ./
|
||||||
|
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
ARG REACT_APP_API_BASE_URL
|
||||||
|
ENV REACT_APP_API_BASE_URL=${REACT_APP_API_BASE_URL}
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM swr.cn-north-4.myhuaweicloud.com/ddn-k8s/docker.io/nginx:alpine3.22-slim
|
||||||
|
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
COPY --from=build /app/build /usr/share/nginx/html
|
||||||
|
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
141
README.md
Normal file
141
README.md
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
# FST Editor archi 前端
|
||||||
|
|
||||||
|
一个基于 React 的「FST Editor 标签管理」前端原型，用于展示和增改 FST 标签列表。
|
||||||
|
|
||||||
|
## 技术栈
|
||||||
|
|
||||||
|
- React 18
|
||||||
|
- react-scripts（Create React App 工具链）
|
||||||
|
- axios（调用后端接口）
|
||||||
|
- lucide-react（图标库）
|
||||||
|
|
||||||
|
## 目录结构（关键文件）
|
||||||
|
|
||||||
|
- `package.json`：项目依赖和脚本
|
||||||
|
- `.env`：环境变量（后端 API 地址）
|
||||||
|
- `public/index.html`：HTML 模板
|
||||||
|
- `src/index.js`：React 入口文件
|
||||||
|
- `App.jsx`：主应用组件，整体布局与页面逻辑
|
||||||
|
- `App.css`：布局、侧边栏、标签页、表格等样式
|
||||||
|
- `services/api.js`：封装 FST 标签相关接口
|
||||||
|
|
||||||
|
## 环境准备
|
||||||
|
|
||||||
|
1. 安装 Node.js（建议 16+，18+ 更佳）
|
||||||
|
2. 安装 npm（随 Node 一起安装即可）
|
||||||
|
|
||||||
|
## 安装依赖
|
||||||
|
|
||||||
|
在项目根目录执行：
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
## 启动开发环境
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm start
|
||||||
|
```
|
||||||
|
|
||||||
|
默认会在浏览器打开：
|
||||||
|
|
||||||
|
- `http://localhost:3003/`
|
||||||
|
|
||||||
|
如未自动打开，可手动在浏览器输入上述地址访问。
|
||||||
|
|
||||||
|
## 构建生产包
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
构建结果会输出到 `build/` 目录，可用于部署。
|
||||||
|
|
||||||
|
## 环境变量
|
||||||
|
|
||||||
|
后端接口地址通过 `.env` 配置（生产环境使用），开发环境通过代理转发：
|
||||||
|
|
||||||
|
```env
|
||||||
|
REACT_APP_API_BASE_URL=http://115.190.223.209:5232/api
|
||||||
|
```
|
||||||
|
|
||||||
|
在 `services/api.js` 中：
|
||||||
|
|
||||||
|
- 开发环境：axios `baseURL` 为 `/api`，由 `package.json` 的 `proxy` 配置转发到 `http://115.190.223.209:5232`。
|
||||||
|
- 生产环境：读取 `.env` 的 `REACT_APP_API_BASE_URL` 作为 axios `baseURL`。
|
||||||
|
|
||||||
|
你可以根据实际后端地址进行修改。
|
||||||
|
|
||||||
|
## 功能说明
|
||||||
|
|
||||||
|
- 左侧侧边栏
|
||||||
|
- FST Editor 标签管理导航
|
||||||
|
- 「增改Fst Editor标签」「Version List」菜单入口
|
||||||
|
- 顶部
|
||||||
|
- 右侧操作图标（夜间模式、全屏、用户）
|
||||||
|
- 标签页区域
|
||||||
|
- 多个标签 Tab（增改Fst Editor标签、Version List）
|
||||||
|
- 内容区域
|
||||||
|
- 标签表格展示：Name、Description、Createtime、Updatetime、Operation
|
||||||
|
- 支持「编辑」「新增下级」「删除」「release」
|
||||||
|
- Name/Description 列缩窄并悬浮显示全称；Name 按后端 level 缩进展示层级
|
||||||
|
- 页面加载自动从 `/api/fst/print_tree` 接口获取数据
|
||||||
|
|
||||||
|
## 版本与 JSON 导入导出
|
||||||
|
|
||||||
|
- 版本快照存储
|
||||||
|
- Release 时，会先创建版本（`POST /versions`），再把当前前端表格中未删除的标签，以 JSON 格式保存到 `fst_stash` 表（`POST /fst/stash`）。
|
||||||
|
- 保存结构示例：
|
||||||
|
- `nodes`: 扁平化的标签节点数组，包含 `name`、`level`、`createtime`、`updateTime`、`parentId`、`treeLevel`、`deleted` 等字段
|
||||||
|
- `meta`: 版本备注、发布时间等元数据（如 `remark`、`released_at`）
|
||||||
|
|
||||||
|
- 版本导出（Version List）
|
||||||
|
- 在 Version List 页面点击导出，会调用 `GET /fst/stash/{version}`。
|
||||||
|
- 将 `fst_stash` 中对应版本的 `content` 字段以 JSON 文件形式下载，例如：`Version_1.0.0.json`。
|
||||||
|
|
||||||
|
- JSON 导入（FstTagPage）
|
||||||
|
- 在「增改Fst Editor标签」页面点击「导入」，选择 `.json` 文件：
|
||||||
|
- 支持两种结构：
|
||||||
|
- 直接数组：`[{...}, {...}]`
|
||||||
|
- 带包装：`{ "version": "1.0.0", "nodes": [...], "meta": {...} }`
|
||||||
|
- 导入后：
|
||||||
|
- 会将 `nodes` 解析并追加到当前前端表格中，恢复层级（依赖 `treeLevel` 顺序计算 `parentId`）。
|
||||||
|
- 默认不会直接修改正式 FST 表，只更新前端数据。
|
||||||
|
- 同时会尝试将该 JSON 写入 `fst_stash`：
|
||||||
|
- 版本号来源优先级：`parsed.version` > 文件名（`Version_xxx.json`）> 用户输入。
|
||||||
|
- 若版本不存在，则自动调用 `POST /versions` 创建版本，再调用 `POST /fst/stash` 保存 JSON。
|
||||||
|
- 如果写入 `fst_stash` 失败，前端会弹出后端返回的错误信息，便于排查。
|
||||||
|
|
||||||
|
- Release 与正式 FST 表
|
||||||
|
- 导入/临时编辑只影响前端状态和 `fst_stash`（通过 Release 或导入逻辑写入），不会立即写入正式 FST 标签表。
|
||||||
|
- 点击 Release 时：
|
||||||
|
- 创建版本记录。
|
||||||
|
- 将当前前端标签快照保存到 `fst_stash`。
|
||||||
|
- 之后再按现有逻辑逐条写入暂存表（通过 `/fst/stash/update`），由后端持久化。
|
||||||
|
|
||||||
|
### 临时编辑版本与正式版本
|
||||||
|
|
||||||
|
- 前端在编辑标签时，会使用一个「临时编辑版本」保存当前工作状态（例如 `v1_editing_temp`）。
|
||||||
|
- 临时编辑版本只存在于 `versions` 与 `fst_stash` 表中，不会在 Version List 页面展示。
|
||||||
|
- 这样可以反复编辑 / 导入 JSON，而不影响已发布的正式版本。
|
||||||
|
- 当用户在前端点击 Release：
|
||||||
|
- 会根据当前临时编辑版本的内容创建一个新的正式版本（例如 `v1.0.0`）。
|
||||||
|
- 将当前标签快照写入对应正式版本的 `fst_stash`。
|
||||||
|
- 临时编辑版本及其 `fst_stash` 会在发布成功后被清理掉。
|
||||||
|
- 如果后端已删除对应的临时编辑版本，而前端仍在使用：
|
||||||
|
- 前端在保存/发布时会收到后端错误。
|
||||||
|
- 界面会提示「当前编辑版本已被删除」，引导用户刷新后重新进入编辑流程。
|
||||||
|
|
||||||
|
### Version List 自动刷新
|
||||||
|
|
||||||
|
- Version List 页面展示所有正式版本（隐藏所有 `*_editing_*` 或 `_editing_temp` 的临时版本）。
|
||||||
|
- 刷新时机：
|
||||||
|
- 首次打开 Version List 页面时，会自动请求一次版本列表。
|
||||||
|
- 从其他页面切换回 Version List 标签页时，会再次刷新列表，保证看到的是最新版本。
|
||||||
|
- 当用户在「增改Fst Editor标签」页面完成 Release 后，会触发一个浏览器事件 `fst:release_success`：
|
||||||
|
- 如果此时 Version List 正在当前标签页，会立即刷新列表。
|
||||||
|
- 如果当时在别的标签页，切回 Version List 时也会自动刷新。
|
||||||
|
- 通过这种方式，用户在发布新版本后，无需手动刷新浏览器即可看到最新的版本记录。
|
||||||
|
|
||||||
|
你可以在 `App.jsx`、`services/api.js` 以及相关自定义 hooks 中按需要继续扩展实际的交互逻辑和接口调用。
|
||||||
29
nginx.conf
Normal file
29
nginx.conf
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name _;
|
||||||
|
|
||||||
|
root /usr/share/nginx/html;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://10.204.136.164:5232;
|
||||||
|
proxy_http_version 1.1;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
|
||||||
|
add_header Access-Control-Allow-Origin *;
|
||||||
|
add_header Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS";
|
||||||
|
add_header Access-Control-Allow-Headers "Content-Type, Authorization";
|
||||||
|
|
||||||
|
if ($request_method = OPTIONS) {
|
||||||
|
return 204;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
17280
package-lock.json
generated
Normal file
17280
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
32
package.json
Normal file
32
package.json
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
{
|
||||||
|
"name": "fst-data-factory",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"lucide-react": "^0.294.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"xlsx": "^0.18.5"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"proxy": "http://127.0.0.1:5232",
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
11994
pnpm-lock.yaml
generated
Normal file
11994
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
11
public/index.html
Normal file
11
public/index.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>FST Editor</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/logo.png
Normal file
BIN
public/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
674
src/App.css
Normal file
674
src/App.css
Normal file
@@ -0,0 +1,674 @@
|
|||||||
|
/* App.css */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-container {
|
||||||
|
display: flex;
|
||||||
|
height: 100vh;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
width: 240px;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #111827;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border-right: 1px solid #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-header {
|
||||||
|
padding: 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
border-bottom: 1px solid #e5e7eb;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-logo-img {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-nav {
|
||||||
|
flex: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
margin: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-header {
|
||||||
|
padding: 12px 16px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-header:hover {
|
||||||
|
background: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-header svg {
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-header svg.expanded {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-header svg:not(.expanded) {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-submenu {
|
||||||
|
padding-left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-subitem {
|
||||||
|
padding: 10px 16px 10px calc(16px + 2ch);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.3s;
|
||||||
|
border-radius: 4px;
|
||||||
|
margin: 2px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-subitem:hover {
|
||||||
|
background: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-subitem.active {
|
||||||
|
background: #e5f1ff;
|
||||||
|
color: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-header {
|
||||||
|
height: 50px;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-profile {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-tooltip {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 30px;
|
||||||
|
right: -10px;
|
||||||
|
background: #333;
|
||||||
|
color: #fff;
|
||||||
|
padding: 6px 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
white-space: nowrap;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-tooltip::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4px;
|
||||||
|
right: 14px;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background: #333;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-profile:hover .user-tooltip {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-actions svg {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-container {
|
||||||
|
display: flex;
|
||||||
|
background: #fff;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
padding: 10px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-right: 1px solid #e8e8e8;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: background 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.active {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-close {
|
||||||
|
margin-left: 4px;
|
||||||
|
padding: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-close:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-dropdown,
|
||||||
|
.tabs-settings {
|
||||||
|
padding: 10px 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-left: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-area {
|
||||||
|
flex: 1;
|
||||||
|
background: #fff;
|
||||||
|
margin: 16px;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-scroll {
|
||||||
|
height: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-header h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-right-sticky {
|
||||||
|
position: sticky;
|
||||||
|
right: 0;
|
||||||
|
margin-left: auto;
|
||||||
|
padding-left: 16px;
|
||||||
|
background: #fff;
|
||||||
|
z-index: 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-actions {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar-subtext {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-subtext {
|
||||||
|
margin-top: 4px;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-subtext .link {
|
||||||
|
color: #1890ff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-subtext .link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline {
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline:hover {
|
||||||
|
color: #1890ff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: #1890ff;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #40a9ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-container {
|
||||||
|
/* 让外层 page-scroll 负责滚动，这里不再额外横向滚动 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table {
|
||||||
|
width: 100%;
|
||||||
|
border-collapse: collapse;
|
||||||
|
font-size: 14px;
|
||||||
|
table-layout: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table thead th,
|
||||||
|
.data-table tbody td {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.data-table thead {
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table th {
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table td {
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-align: center;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table tbody td:first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table thead th:nth-child(4),
|
||||||
|
.data-table thead th:nth-child(5),
|
||||||
|
.data-table thead th:nth-child(6),
|
||||||
|
.data-table tbody td:nth-child(4),
|
||||||
|
.data-table tbody td:nth-child(5),
|
||||||
|
.data-table tbody td:nth-child(6) {
|
||||||
|
text-align: left;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table thead th:nth-child(3),
|
||||||
|
.data-table tbody td:nth-child(3) {
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 140px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table thead th:nth-child(2),
|
||||||
|
.data-table tbody td:nth-child(2) {
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table thead th:nth-child(4),
|
||||||
|
.data-table tbody td:nth-child(4),
|
||||||
|
.data-table thead th:nth-child(5),
|
||||||
|
.data-table tbody td:nth-child(5) {
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table thead th:nth-child(6),
|
||||||
|
.data-table tbody td:nth-child(6) {
|
||||||
|
white-space: nowrap;
|
||||||
|
min-width: 220px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-table thead th:nth-child(5),
|
||||||
|
.version-table tbody td:nth-child(5) {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-table tbody tr:hover {
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-primary {
|
||||||
|
color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-icon,
|
||||||
|
.expand-placeholder {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
margin-right: 4px;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #666;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-icon:hover {
|
||||||
|
background: #e6f7ff;
|
||||||
|
color: #1890ff;
|
||||||
|
border-color: #1890ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-placeholder {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-buttons {
|
||||||
|
display: flex;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: #1890ff;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-link:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
color: #ff4d4f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-table tbody td:first-child {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.version-table .action-buttons {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-backdrop {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 24px 32px 28px;
|
||||||
|
width: 520px;
|
||||||
|
max-width: 90%;
|
||||||
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-close:hover {
|
||||||
|
color: #555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-field {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-field label {
|
||||||
|
font-size: 14px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-field input,
|
||||||
|
.modal-field textarea,
|
||||||
|
.modal-field select {
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 8px 10px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-field .scene-select-wrapper {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-field .scene-select {
|
||||||
|
width: 100%;
|
||||||
|
padding-left: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-dot {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-dot-l2 {
|
||||||
|
left: 10px;
|
||||||
|
background-color: #36b37e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-dot-l3 {
|
||||||
|
left: 20px;
|
||||||
|
background-color: #ffab00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-select option[value='L2'] {
|
||||||
|
color: #36b37e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-select option[value='L3'] {
|
||||||
|
color: #ffab00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-multi-select {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4px 28px 4px 8px;
|
||||||
|
min-height: 34px;
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-multi-values {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
gap: 4px;
|
||||||
|
flex: 1;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-multi-placeholder {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-multi-arrow {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
font-size: 12px;
|
||||||
|
color: #888888;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-multi-dropdown {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 20;
|
||||||
|
top: calc(100% + 4px);
|
||||||
|
left: 0;
|
||||||
|
min-width: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
border: 1px solid #d9d9d9;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
|
||||||
|
padding: 4px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-multi-option {
|
||||||
|
padding: 6px 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 13px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-multi-option:hover {
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scene-multi-check {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1677ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-field input[readonly],
|
||||||
|
.modal-field textarea[readonly] {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-actions {
|
||||||
|
margin-top: 16px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #888;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #555;
|
||||||
|
}
|
||||||
219
src/App.jsx
Normal file
219
src/App.jsx
Normal file
@@ -0,0 +1,219 @@
|
|||||||
|
// App.jsx
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
User,
|
||||||
|
ChevronDown,
|
||||||
|
X
|
||||||
|
} from 'lucide-react';
|
||||||
|
import './App.css';
|
||||||
|
import FstTagPage from './pages/FstTagPage';
|
||||||
|
import VersionListPage from './pages/VersionListPage';
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
// 页面组件注册表
|
||||||
|
const pages = {
|
||||||
|
'增改Fst Editor标签': FstTagPage,
|
||||||
|
'Version List': VersionListPage,
|
||||||
|
// 将来如果有新页面，只需在这里注册即可，例如：
|
||||||
|
// 'New Page Name': NewPageComponent,
|
||||||
|
};
|
||||||
|
|
||||||
|
// 页面名称到 URL slug 的映射
|
||||||
|
const pageToSlug = {
|
||||||
|
'增改Fst Editor标签': 'editor',
|
||||||
|
'Version List': 'version-list'
|
||||||
|
};
|
||||||
|
|
||||||
|
// URL slug 到页面名称的映射 (反向)
|
||||||
|
const slugToPage = Object.fromEntries(
|
||||||
|
Object.entries(pageToSlug).map(([name, slug]) => [slug, name])
|
||||||
|
);
|
||||||
|
|
||||||
|
const [activeTab, setActiveTab] = useState(() => {
|
||||||
|
// 初始化时从 URL 读取 activeTab
|
||||||
|
const params = new URLSearchParams(window.location.search);
|
||||||
|
const tabSlug = params.get('tab');
|
||||||
|
if (tabSlug && slugToPage[tabSlug]) {
|
||||||
|
return slugToPage[tabSlug];
|
||||||
|
}
|
||||||
|
return '增改Fst Editor标签';
|
||||||
|
});
|
||||||
|
|
||||||
|
const [expandedMenu, setExpandedMenu] = useState({
|
||||||
|
FST标签管理: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const [tabs, setTabs] = useState(() => {
|
||||||
|
// 初始化 tabs，确保 activeTab 在列表中
|
||||||
|
const initialTabName = activeTab; // 此时 activeTab 已经是根据 URL 算出的初始值
|
||||||
|
const defaultTabs = [
|
||||||
|
{ id: 1, name: '增改Fst Editor标签', closable: true },
|
||||||
|
{ id: 2, name: 'Version List', closable: true }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 如果 URL 指定的页面不在默认列表里（虽然当前场景都在），可以追加
|
||||||
|
// 这里简单起见，如果初始 activeTab 不在默认里，就追加进去
|
||||||
|
if (!defaultTabs.some(t => t.name === initialTabName)) {
|
||||||
|
return [...defaultTabs, { id: Date.now(), name: initialTabName, closable: true }];
|
||||||
|
}
|
||||||
|
return defaultTabs;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 监听 activeTab 变化，同步到 URL
|
||||||
|
useEffect(() => {
|
||||||
|
const slug = pageToSlug[activeTab];
|
||||||
|
if (slug) {
|
||||||
|
const url = new URL(window.location);
|
||||||
|
url.searchParams.set('tab', slug);
|
||||||
|
window.history.pushState({}, '', url);
|
||||||
|
}
|
||||||
|
}, [activeTab]);
|
||||||
|
|
||||||
|
const openTab = (name) => {
|
||||||
|
setTabs((prev) => {
|
||||||
|
if (prev.some((tab) => tab.name === name)) {
|
||||||
|
return prev;
|
||||||
|
}
|
||||||
|
const maxId = prev.reduce((max, tab) => (tab.id > max ? tab.id : max), 0);
|
||||||
|
return [...prev, { id: maxId + 1, name, closable: true }];
|
||||||
|
});
|
||||||
|
setActiveTab(name);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleMenu = (menuName) => {
|
||||||
|
setExpandedMenu((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[menuName]: !prev[menuName]
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
|
const closeTab = (tabId, e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setTabs((prevTabs) => {
|
||||||
|
const closingTab = prevTabs.find((tab) => tab.id === tabId);
|
||||||
|
const remainingTabs = prevTabs.filter((tab) => tab.id !== tabId);
|
||||||
|
|
||||||
|
if (closingTab && closingTab.name === activeTab) {
|
||||||
|
if (remainingTabs.length > 0) {
|
||||||
|
const closingIndex = prevTabs.findIndex((tab) => tab.id === tabId);
|
||||||
|
const next =
|
||||||
|
prevTabs[closingIndex + 1] ||
|
||||||
|
prevTabs[closingIndex - 1] ||
|
||||||
|
remainingTabs[0];
|
||||||
|
setActiveTab(next.name);
|
||||||
|
} else {
|
||||||
|
setActiveTab('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return remainingTabs;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="app-container">
|
||||||
|
<aside className="sidebar">
|
||||||
|
<div className="sidebar-header">
|
||||||
|
<img src="/logo.png" alt="logo" className="sidebar-logo-img" />
|
||||||
|
<span>FST Editor</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="sidebar-nav">
|
||||||
|
<div className="nav-item">
|
||||||
|
<div
|
||||||
|
className="nav-item-header"
|
||||||
|
onClick={() => {
|
||||||
|
toggleMenu('FST标签管理');
|
||||||
|
openTab('增改Fst Editor标签');
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ChevronDown
|
||||||
|
size={16}
|
||||||
|
className={expandedMenu.FST标签管理 ? 'expanded' : ''}
|
||||||
|
/>
|
||||||
|
<span>FST Editor标签管理</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{expandedMenu.FST标签管理 && (
|
||||||
|
<div className="nav-submenu">
|
||||||
|
<div
|
||||||
|
className={`nav-subitem ${
|
||||||
|
activeTab === '增改Fst Editor标签' ? 'active' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => openTab('增改Fst Editor标签')}
|
||||||
|
>
|
||||||
|
增改Fst Editor标签
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`nav-subitem ${
|
||||||
|
activeTab === 'Version List' ? 'active' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => openTab('Version List')}
|
||||||
|
>
|
||||||
|
Version List
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main className="main-content">
|
||||||
|
<header className="top-header">
|
||||||
|
<div className="header-actions">
|
||||||
|
<div className="user-profile">
|
||||||
|
<User size={20} />
|
||||||
|
<div className="user-tooltip">用户中心</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="tabs-container">
|
||||||
|
{tabs.map((tab) => (
|
||||||
|
<div
|
||||||
|
key={tab.id}
|
||||||
|
className={`tab ${activeTab === tab.name ? 'active' : ''}`}
|
||||||
|
onClick={() => setActiveTab(tab.name)}
|
||||||
|
>
|
||||||
|
<span className="tab-icon">📄</span>
|
||||||
|
<span className="tab-name">{tab.name}</span>
|
||||||
|
{tab.closable && (
|
||||||
|
<X
|
||||||
|
size={14}
|
||||||
|
className="tab-close"
|
||||||
|
onClick={(e) => closeTab(tab.id, e)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
<div className="tabs-dropdown">
|
||||||
|
<ChevronDown size={16} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="content-area">
|
||||||
|
{tabs.map((tab) => {
|
||||||
|
const Component = pages[tab.name];
|
||||||
|
if (!Component) return null;
|
||||||
|
const isActive = activeTab === tab.name;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={tab.id}
|
||||||
|
style={{
|
||||||
|
display: isActive ? 'block' : 'none',
|
||||||
|
height: '100%'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="page-scroll">
|
||||||
|
<Component isActive={isActive} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
95
src/components/fst/ChildTagModal.jsx
Normal file
95
src/components/fst/ChildTagModal.jsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
import { SceneMultiSelect, TagGroupMultiSelect } from './EditTagModal';
|
||||||
|
|
||||||
|
const ChildTagModal = ({
|
||||||
|
open,
|
||||||
|
form,
|
||||||
|
parentName,
|
||||||
|
level,
|
||||||
|
onChangeForm,
|
||||||
|
onCancel,
|
||||||
|
onConfirm
|
||||||
|
}) => {
|
||||||
|
if (!open) return null;
|
||||||
|
const safeForm = form || { name: '', desc: '', scene: '', taggroup: '' };
|
||||||
|
return (
|
||||||
|
<div className="modal-backdrop">
|
||||||
|
<div className="modal">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h3>新建子标签</h3>
|
||||||
|
<button className="modal-close" onClick={onCancel}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>新标签名称</label>
|
||||||
|
<input
|
||||||
|
value={safeForm.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChangeForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
name: e.target.value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>父标签名称</label>
|
||||||
|
<input value={parentName || ''} readOnly />
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>级别</label>
|
||||||
|
<input value={level} readOnly />
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>场景</label>
|
||||||
|
<SceneMultiSelect
|
||||||
|
value={safeForm.scene}
|
||||||
|
onChange={(val) =>
|
||||||
|
onChangeForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
scene: val
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>TagGroup</label>
|
||||||
|
<TagGroupMultiSelect
|
||||||
|
value={safeForm.taggroup}
|
||||||
|
onChange={(val) =>
|
||||||
|
onChangeForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
taggroup: val
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>备注</label>
|
||||||
|
<textarea
|
||||||
|
rows={3}
|
||||||
|
value={safeForm.desc}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChangeForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
desc: e.target.value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="btn btn-outline" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-primary" onClick={onConfirm}>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChildTagModal;
|
||||||
32
src/components/fst/DeleteConfirmModal.jsx
Normal file
32
src/components/fst/DeleteConfirmModal.jsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
const DeleteConfirmModal = ({ open, title, message, onCancel, onConfirm }) => {
|
||||||
|
if (!open) return null;
|
||||||
|
const header = title || '确认删除';
|
||||||
|
const content =
|
||||||
|
message || '删除该标签会一并删除其所有子标签，确认删除吗？';
|
||||||
|
return (
|
||||||
|
<div className="modal-backdrop">
|
||||||
|
<div className="modal">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h3>{header}</h3>
|
||||||
|
<button className="modal-close" onClick={onCancel}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<p>{content}</p>
|
||||||
|
</div>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="btn btn-outline" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-primary" onClick={onConfirm}>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DeleteConfirmModal;
|
||||||
|
|
||||||
229
src/components/fst/EditTagModal.jsx
Normal file
229
src/components/fst/EditTagModal.jsx
Normal file
@@ -0,0 +1,229 @@
|
|||||||
|
import { useState, useRef, useEffect } from 'react';
|
||||||
|
|
||||||
|
const MultiTagSelect = ({
|
||||||
|
value,
|
||||||
|
onChange,
|
||||||
|
options,
|
||||||
|
placeholder,
|
||||||
|
getColor
|
||||||
|
}) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const ref = useRef(null);
|
||||||
|
const raw = typeof value === 'string' ? value : '';
|
||||||
|
const parts = raw
|
||||||
|
.split(',')
|
||||||
|
.map((s) => s.trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event) => {
|
||||||
|
if (!ref.current) return;
|
||||||
|
if (!ref.current.contains(event.target)) {
|
||||||
|
setOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const togglePart = (target) => {
|
||||||
|
const exists = parts.includes(target);
|
||||||
|
const next = exists ? parts.filter((p) => p !== target) : [...parts, target];
|
||||||
|
onChange(next.join(','));
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearAll = () => {
|
||||||
|
onChange('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const tagOrder = Array.isArray(options) ? options : [];
|
||||||
|
const orderedParts = tagOrder.filter((p) => parts.includes(p));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`scene-multi-select ${open ? 'scene-multi-open' : ''}`}
|
||||||
|
ref={ref}
|
||||||
|
onClick={() => setOpen((prev) => !prev)}
|
||||||
|
>
|
||||||
|
<div className="scene-multi-values">
|
||||||
|
{orderedParts.length === 0 ? (
|
||||||
|
<span className="scene-multi-placeholder">{placeholder}</span>
|
||||||
|
) : (
|
||||||
|
orderedParts.map((tag) => {
|
||||||
|
const color = getColor(tag);
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: '0 6px',
|
||||||
|
marginRight: 4,
|
||||||
|
marginTop: 2,
|
||||||
|
borderRadius: 999,
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: '18px',
|
||||||
|
backgroundColor: `${color}20`,
|
||||||
|
color,
|
||||||
|
border: `1px solid ${color}`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<span className="scene-multi-arrow">{open ? '▴' : '▾'}</span>
|
||||||
|
{open && (
|
||||||
|
<div
|
||||||
|
className="scene-multi-dropdown"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="scene-multi-option"
|
||||||
|
onClick={() => {
|
||||||
|
clearAll();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>{placeholder}</span>
|
||||||
|
{parts.length === 0 && <span className="scene-multi-check">✓</span>}
|
||||||
|
</div>
|
||||||
|
{tagOrder.map((tag) => {
|
||||||
|
const color = getColor(tag);
|
||||||
|
const active = parts.includes(tag);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={tag}
|
||||||
|
className="scene-multi-option"
|
||||||
|
onClick={() => {
|
||||||
|
togglePart(tag);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
color,
|
||||||
|
fontWeight: active ? 600 : 400
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
{active && <span className="scene-multi-check">✓</span>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSceneColor = (scene) => {
|
||||||
|
if (scene === 'L2') return '#36B37E';
|
||||||
|
if (scene === 'L3') return '#FFAB00';
|
||||||
|
return '#64748b';
|
||||||
|
};
|
||||||
|
|
||||||
|
const getTagGroupColor = (tagGroup) => {
|
||||||
|
if (tagGroup === 'Parking') return '#0052CC';
|
||||||
|
if (tagGroup === 'Driving') return '#FF5630';
|
||||||
|
return '#64748b';
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SceneMultiSelect = ({ value, onChange }) => (
|
||||||
|
<MultiTagSelect
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
options={['L2', 'L3']}
|
||||||
|
placeholder="无场景"
|
||||||
|
getColor={getSceneColor}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
export const TagGroupMultiSelect = ({ value, onChange }) => (
|
||||||
|
<MultiTagSelect
|
||||||
|
value={value}
|
||||||
|
onChange={onChange}
|
||||||
|
options={['Parking', 'Driving']}
|
||||||
|
placeholder="无标签组"
|
||||||
|
getColor={getTagGroupColor}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
|
||||||
|
const EditTagModal = ({
|
||||||
|
open,
|
||||||
|
form,
|
||||||
|
treeLevel,
|
||||||
|
parentName,
|
||||||
|
onChangeField,
|
||||||
|
onCancel,
|
||||||
|
onSave
|
||||||
|
}) => {
|
||||||
|
if (!open) return null;
|
||||||
|
const safeForm = form || { stsName: '', level: '', scene: 'L2', taggroup: '' };
|
||||||
|
return (
|
||||||
|
<div className="modal-backdrop">
|
||||||
|
<div className="modal">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h3>修改标签</h3>
|
||||||
|
<button className="modal-close" onClick={onCancel}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>名称</label>
|
||||||
|
<input
|
||||||
|
value={safeForm.stsName}
|
||||||
|
onChange={(e) => onChangeField('stsName', e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>级别</label>
|
||||||
|
<input value={treeLevel} readOnly />
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>父标签名称</label>
|
||||||
|
<input value={parentName || ''} readOnly />
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>场景</label>
|
||||||
|
<SceneMultiSelect
|
||||||
|
value={safeForm.scene}
|
||||||
|
onChange={(val) => onChangeField('scene', val)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>TagGroup</label>
|
||||||
|
<TagGroupMultiSelect
|
||||||
|
value={safeForm.taggroup}
|
||||||
|
onChange={(val) => onChangeField('taggroup', val)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>备注</label>
|
||||||
|
<textarea
|
||||||
|
rows={3}
|
||||||
|
value={safeForm.level}
|
||||||
|
onChange={(e) => onChangeField('level', e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="btn btn-outline" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-primary" onClick={onSave}>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EditTagModal;
|
||||||
249
src/components/fst/FstTable.jsx
Normal file
249
src/components/fst/FstTable.jsx
Normal file
@@ -0,0 +1,249 @@
|
|||||||
|
const FstTable = ({
|
||||||
|
rows,
|
||||||
|
expandedIds,
|
||||||
|
onToggleExpand,
|
||||||
|
onAddChild,
|
||||||
|
onEdit,
|
||||||
|
onDelete
|
||||||
|
}) => {
|
||||||
|
const data = Array.isArray(rows) ? rows : [];
|
||||||
|
return (
|
||||||
|
<table className="data-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{[
|
||||||
|
{ key: 'name', title: 'Name' },
|
||||||
|
{ key: 'scene', title: 'Scene' },
|
||||||
|
{ key: 'taggroup', title: 'TagGroup' },
|
||||||
|
{ key: 'levelnum', title: 'Level' },
|
||||||
|
{ key: 'desc', title: 'Description' },
|
||||||
|
{ key: 'create', title: 'Createtime' },
|
||||||
|
{ key: 'update', title: 'Updatetime' },
|
||||||
|
{ key: 'action', title: 'Operation' }
|
||||||
|
].map((col) => (
|
||||||
|
<th
|
||||||
|
key={col.key}
|
||||||
|
style={
|
||||||
|
col.key === 'name' || col.key === 'action'
|
||||||
|
? { textAlign: 'left' }
|
||||||
|
: col.key === 'update'
|
||||||
|
? { whiteSpace: 'nowrap' }
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{col.title}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{data.map((row) => {
|
||||||
|
if (row.deleted === 1) return null;
|
||||||
|
let parentId = row.parentId;
|
||||||
|
let visible = true;
|
||||||
|
while (parentId) {
|
||||||
|
const parent = data.find((r) => r.id === parentId);
|
||||||
|
if (!parent) break;
|
||||||
|
if (!expandedIds.includes(parent.id)) {
|
||||||
|
visible = false;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
parentId = parent.parentId;
|
||||||
|
}
|
||||||
|
if (!visible) return null;
|
||||||
|
const hasChildren = data.some(
|
||||||
|
(r) => r.parentId === row.id && r.deleted === 0
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<tr key={row.id}>
|
||||||
|
{[
|
||||||
|
'name',
|
||||||
|
'scene',
|
||||||
|
'taggroup',
|
||||||
|
'levelnum',
|
||||||
|
'desc',
|
||||||
|
'create',
|
||||||
|
'update',
|
||||||
|
'action'
|
||||||
|
].map((key) => {
|
||||||
|
if (key === 'name') {
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
key="name"
|
||||||
|
className="text-primary"
|
||||||
|
style={{
|
||||||
|
textAlign: 'left',
|
||||||
|
...(row.treeLevel
|
||||||
|
? { paddingLeft: 16 * Number(row.treeLevel) }
|
||||||
|
: {})
|
||||||
|
}}
|
||||||
|
title={row.stsName}
|
||||||
|
>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center' }}>
|
||||||
|
<span
|
||||||
|
className={
|
||||||
|
hasChildren ? 'expand-icon' : 'expand-placeholder'
|
||||||
|
}
|
||||||
|
onClick={
|
||||||
|
hasChildren
|
||||||
|
? (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
onToggleExpand(row.id);
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{hasChildren
|
||||||
|
? expandedIds.includes(row.id)
|
||||||
|
? '▾'
|
||||||
|
: '▸'
|
||||||
|
: ''}
|
||||||
|
</span>
|
||||||
|
{row.stsName}
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (key === 'scene') {
|
||||||
|
const raw = row.scene || '';
|
||||||
|
const parts = raw
|
||||||
|
.split(',')
|
||||||
|
.map((s) => String(s).trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
const getColor = (value) => {
|
||||||
|
if (value === 'L2') return '#36B37E';
|
||||||
|
if (value === 'L3') return '#FFAB00';
|
||||||
|
return '#64748b';
|
||||||
|
};
|
||||||
|
if (!parts.length) {
|
||||||
|
return <td key="scene"></td>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<td key="scene">
|
||||||
|
{parts.map((value, index) => (
|
||||||
|
<span
|
||||||
|
key={`${value}-${index}`}
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
padding: '0 6px',
|
||||||
|
marginRight: 4,
|
||||||
|
borderRadius: 999,
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: '18px',
|
||||||
|
backgroundColor: `${getColor(value)}20`,
|
||||||
|
color: getColor(value),
|
||||||
|
border: `1px solid ${getColor(value)}`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (key === 'taggroup') {
|
||||||
|
const raw = row.taggroup || '';
|
||||||
|
const parts = raw
|
||||||
|
.split(',')
|
||||||
|
.map((s) => String(s).trim())
|
||||||
|
.filter(Boolean);
|
||||||
|
const getColor = (value) => {
|
||||||
|
if (value === 'Parking') return '#0052CC';
|
||||||
|
if (value === 'Driving') return '#FF5630';
|
||||||
|
return '#64748b';
|
||||||
|
};
|
||||||
|
if (!parts.length) {
|
||||||
|
return <td key="taggroup"></td>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<td key="taggroup">
|
||||||
|
{parts.map((value, index) => (
|
||||||
|
<span
|
||||||
|
key={`${value}-${index}`}
|
||||||
|
style={{
|
||||||
|
display: 'inline-block',
|
||||||
|
padding: '0 6px',
|
||||||
|
marginRight: 4,
|
||||||
|
borderRadius: 999,
|
||||||
|
fontSize: 12,
|
||||||
|
lineHeight: '18px',
|
||||||
|
backgroundColor: `${getColor(value)}20`,
|
||||||
|
color: getColor(value),
|
||||||
|
border: `1px solid ${getColor(value)}`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (key === 'levelnum') {
|
||||||
|
return <td key="levelnum">{row.treeLevel || 1}</td>;
|
||||||
|
}
|
||||||
|
if (key === 'desc') {
|
||||||
|
return (
|
||||||
|
<td key="desc" title={row.level}>
|
||||||
|
{row.level}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (key === 'create') {
|
||||||
|
return <td key="create">{row.createtime}</td>;
|
||||||
|
}
|
||||||
|
if (key === 'update') {
|
||||||
|
return <td key="update" style={{ whiteSpace: 'nowrap' }}>{row.updateTime}</td>;
|
||||||
|
}
|
||||||
|
if (key === 'action') {
|
||||||
|
return (
|
||||||
|
<td key="action" style={{ textAlign: 'left' }}>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
overflowX: 'auto',
|
||||||
|
maxWidth: '100%'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="action-buttons"
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
gap: 12,
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
minWidth: 220,
|
||||||
|
padding: '2px 0'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
className="btn-link"
|
||||||
|
onClick={() => onAddChild(row.id)}
|
||||||
|
>
|
||||||
|
新增下级
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-link"
|
||||||
|
onClick={() => onEdit(row.id)}
|
||||||
|
>
|
||||||
|
编辑
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-link btn-danger"
|
||||||
|
onClick={() => onDelete(row.id)}
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FstTable;
|
||||||
44
src/components/fst/FstToolbar.jsx
Normal file
44
src/components/fst/FstToolbar.jsx
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
const FstToolbar = ({
|
||||||
|
onCreateNew,
|
||||||
|
onImportClick,
|
||||||
|
onReleaseClick,
|
||||||
|
onShowImportExample,
|
||||||
|
noVersionTip
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className="content-header">
|
||||||
|
<h2>Fst Editor标签</h2>
|
||||||
|
<div className="toolbar-right-sticky">
|
||||||
|
<div className="content-actions toolbar-actions">
|
||||||
|
<button className="btn btn-outline" onClick={onCreateNew}>
|
||||||
|
新建一级标签
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-primary" onClick={onImportClick}>
|
||||||
|
导入
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-primary" onClick={onReleaseClick}>
|
||||||
|
Release
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="content-subtext toolbar-subtext">
|
||||||
|
无标签数据？
|
||||||
|
<a
|
||||||
|
href="javascript:;"
|
||||||
|
className="link"
|
||||||
|
onClick={onShowImportExample}
|
||||||
|
>
|
||||||
|
导入示例数据
|
||||||
|
</a>
|
||||||
|
{noVersionTip && (
|
||||||
|
<div style={{ marginTop: '4px', color: '#f97316' }}>
|
||||||
|
当前没有任何版本，请先通过“导入”创建一个版本
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FstToolbar;
|
||||||
|
|
||||||
38
src/components/fst/InfoModal.jsx
Normal file
38
src/components/fst/InfoModal.jsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
const InfoModal = ({
|
||||||
|
open,
|
||||||
|
title,
|
||||||
|
content,
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
bodyStyle,
|
||||||
|
closable = true
|
||||||
|
}) => {
|
||||||
|
if (!open) return null;
|
||||||
|
return (
|
||||||
|
<div className="modal-backdrop">
|
||||||
|
<div className="modal">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h3>{title}</h3>
|
||||||
|
{closable && (
|
||||||
|
<button className="modal-close" onClick={onClose}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="modal-body" style={bodyStyle}>
|
||||||
|
{content ? <p>{content}</p> : children}
|
||||||
|
</div>
|
||||||
|
{closable && (
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="btn btn-primary" onClick={onClose}>
|
||||||
|
确定
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InfoModal;
|
||||||
|
|
||||||
86
src/components/fst/ReleaseDiffPanel.jsx
Normal file
86
src/components/fst/ReleaseDiffPanel.jsx
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
const ReleaseDiffPanel = ({ diff, expanded, onToggleSection }) => {
|
||||||
|
if (!diff) return null;
|
||||||
|
const summary = diff.summary || {};
|
||||||
|
const added = Array.isArray(diff.added) ? diff.added : [];
|
||||||
|
const removed = Array.isArray(diff.removed) ? diff.removed : [];
|
||||||
|
const changed = Array.isArray(diff.changed) ? diff.changed : [];
|
||||||
|
const addedCount =
|
||||||
|
typeof summary.added_count === 'number' ? summary.added_count : added.length;
|
||||||
|
const removedCount =
|
||||||
|
typeof summary.removed_count === 'number'
|
||||||
|
? summary.removed_count
|
||||||
|
: removed.length;
|
||||||
|
const changedCount =
|
||||||
|
typeof summary.changed_count === 'number'
|
||||||
|
? summary.changed_count
|
||||||
|
: changed.length;
|
||||||
|
const maxItems = 5;
|
||||||
|
const displayFromVersion = (() => {
|
||||||
|
const from = summary.from_version;
|
||||||
|
if (!from) return '无';
|
||||||
|
const lower = String(from).toLowerCase();
|
||||||
|
if (
|
||||||
|
lower === 'fst' ||
|
||||||
|
lower.startsWith('fst_') ||
|
||||||
|
lower.endsWith('_editing_temp')
|
||||||
|
) {
|
||||||
|
return '无';
|
||||||
|
}
|
||||||
|
return from;
|
||||||
|
})();
|
||||||
|
const formatPath = (item) => {
|
||||||
|
if (!item) return '';
|
||||||
|
if (typeof item === 'string') return item;
|
||||||
|
if (item.path) return item.path;
|
||||||
|
if (item.node && item.node.path) return item.node.path;
|
||||||
|
if (item.node && item.node.name) return item.node.name;
|
||||||
|
if (item.before && item.after && item.before.name && item.after.name) {
|
||||||
|
return `${item.before.name} -> ${item.after.name}`;
|
||||||
|
}
|
||||||
|
return JSON.stringify(item);
|
||||||
|
};
|
||||||
|
const renderList = (title, key, items, total) => {
|
||||||
|
if (!items.length && !total) return null;
|
||||||
|
const displayTotal = typeof total === 'number' ? total : items.length;
|
||||||
|
const isExpanded = !!(expanded && expanded[key]);
|
||||||
|
const displayItems = isExpanded ? items : items.slice(0, maxItems);
|
||||||
|
return (
|
||||||
|
<div style={{ marginTop: '8px' }}>
|
||||||
|
<div>{`${title}（${displayTotal}）:`}</div>
|
||||||
|
<ul>
|
||||||
|
{displayItems.map((item, index) => (
|
||||||
|
<li key={`${title}-${index}`}>{formatPath(item)}</li>
|
||||||
|
))}
|
||||||
|
{displayTotal > maxItems && (
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="btn-link"
|
||||||
|
onClick={() => onToggleSection && onToggleSection(key)}
|
||||||
|
>
|
||||||
|
{isExpanded ? '收起' : `显示更多（共 ${displayTotal} 条）`}
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
)}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div style={{ marginTop: '12px', textAlign: 'left' }}>
|
||||||
|
<h4 style={{ marginBottom: '8px' }}>与上一版本的差异：</h4>
|
||||||
|
<ul>
|
||||||
|
<li>对比版本：{displayFromVersion} → {summary.to_version}</li>
|
||||||
|
<li>新增标签：{addedCount}</li>
|
||||||
|
<li>删除标签：{removedCount}</li>
|
||||||
|
<li>修改标签：{changedCount}</li>
|
||||||
|
</ul>
|
||||||
|
{renderList('新增标签', 'added', added, addedCount)}
|
||||||
|
{renderList('删除标签', 'removed', removed, removedCount)}
|
||||||
|
{renderList('修改标签', 'changed', changed, changedCount)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReleaseDiffPanel;
|
||||||
|
|
||||||
78
src/components/fst/ReleaseModal.jsx
Normal file
78
src/components/fst/ReleaseModal.jsx
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
const ReleaseModal = ({
|
||||||
|
open,
|
||||||
|
noVersionTip,
|
||||||
|
releaseForm,
|
||||||
|
onChangeReleaseForm,
|
||||||
|
onCancel,
|
||||||
|
onConfirm
|
||||||
|
}) => {
|
||||||
|
if (!open) return null;
|
||||||
|
const safeForm = releaseForm || { versionName: '', remark: '' };
|
||||||
|
return (
|
||||||
|
<div className="modal-backdrop">
|
||||||
|
<div className="modal">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h3>发布版本</h3>
|
||||||
|
<button className="modal-close" onClick={onCancel}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
{noVersionTip && (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
marginBottom: '12px',
|
||||||
|
padding: '8px 10px',
|
||||||
|
backgroundColor: '#FFFBEB',
|
||||||
|
border: '1px solid #FBBF24',
|
||||||
|
color: '#92400E',
|
||||||
|
fontSize: '13px',
|
||||||
|
borderRadius: '4px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
⚠️ 当前系统中无历史版本，本次发布将作为首个正式版本。
|
||||||
|
{safeForm.versionName && safeForm.versionName.trim() && (
|
||||||
|
<>
|
||||||
|
<br />
|
||||||
|
差异统计：无 → {safeForm.versionName.trim()}
|
||||||
|
（新增全部标签）
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>版本号</label>
|
||||||
|
<input
|
||||||
|
value={safeForm.versionName}
|
||||||
|
readOnly
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>备注</label>
|
||||||
|
<textarea
|
||||||
|
rows={3}
|
||||||
|
value={safeForm.remark}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChangeReleaseForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
remark: e.target.value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="btn btn-outline" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-primary" onClick={onConfirm}>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReleaseModal;
|
||||||
|
|
||||||
83
src/components/fst/RootTagModal.jsx
Normal file
83
src/components/fst/RootTagModal.jsx
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
import { SceneMultiSelect, TagGroupMultiSelect } from './EditTagModal';
|
||||||
|
|
||||||
|
const RootTagModal = ({ open, form, onChangeForm, onCancel, onConfirm }) => {
|
||||||
|
if (!open) return null;
|
||||||
|
const safeForm = form || { name: '', desc: '', scene: '', taggroup: '' };
|
||||||
|
return (
|
||||||
|
<div className="modal-backdrop">
|
||||||
|
<div className="modal">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h3>新建一级标签</h3>
|
||||||
|
<button className="modal-close" onClick={onCancel}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>新标签名称</label>
|
||||||
|
<input
|
||||||
|
value={safeForm.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChangeForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
name: e.target.value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>级别</label>
|
||||||
|
<input value={1} readOnly />
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>场景</label>
|
||||||
|
<SceneMultiSelect
|
||||||
|
value={safeForm.scene}
|
||||||
|
onChange={(val) =>
|
||||||
|
onChangeForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
scene: val
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>TagGroup</label>
|
||||||
|
<TagGroupMultiSelect
|
||||||
|
value={safeForm.taggroup}
|
||||||
|
onChange={(val) =>
|
||||||
|
onChangeForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
taggroup: val
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="modal-field">
|
||||||
|
<label>备注</label>
|
||||||
|
<textarea
|
||||||
|
rows={3}
|
||||||
|
value={safeForm.desc}
|
||||||
|
onChange={(e) =>
|
||||||
|
onChangeForm((prev) => ({
|
||||||
|
...prev,
|
||||||
|
desc: e.target.value
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="btn btn-outline" onClick={onCancel}>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-primary" onClick={onConfirm}>
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RootTagModal;
|
||||||
407
src/components/version/VersionListView.jsx
Normal file
407
src/components/version/VersionListView.jsx
Normal file
@@ -0,0 +1,407 @@
|
|||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import api from '../../services/api';
|
||||||
|
import useVersionList from '../../hooks/useVersionList';
|
||||||
|
import InfoModal from '../fst/InfoModal';
|
||||||
|
|
||||||
|
// const FEISHU_WIKI_URL =
|
||||||
|
// 'https://mercedes-benz.feishu.cn/wiki/KoZswPdy4ickj5kM0CucLa7FnKh';
|
||||||
|
|
||||||
|
const VersionListView = ({ isActive }) => {
|
||||||
|
const { versions, refreshVersions } = useVersionList(isActive);
|
||||||
|
const [exportTarget, setExportTarget] = useState(null);
|
||||||
|
const [isExportModalOpen, setIsExportModalOpen] = useState(false);
|
||||||
|
const [activateTarget, setActivateTarget] = useState(null);
|
||||||
|
const [isActivateModalOpen, setIsActivateModalOpen] = useState(false);
|
||||||
|
const [activatingVersionId, setActivatingVersionId] = useState(null);
|
||||||
|
const [isFeishuSyncDoneOpen, setIsFeishuSyncDoneOpen] = useState(false);
|
||||||
|
const [watchReleaseVersionName, setWatchReleaseVersionName] = useState('');
|
||||||
|
|
||||||
|
const sleep = (ms) =>
|
||||||
|
new Promise((resolve) => {
|
||||||
|
window.setTimeout(resolve, ms);
|
||||||
|
});
|
||||||
|
|
||||||
|
const isFeishuSynced = (status) => {
|
||||||
|
const normalized = String(status || '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
return (
|
||||||
|
normalized === 'synced' ||
|
||||||
|
normalized === 'success' ||
|
||||||
|
normalized === 'done' ||
|
||||||
|
normalized === '1' ||
|
||||||
|
normalized === '已同步'
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const isReleaseRowSynced = (row) => {
|
||||||
|
if (!row) return false;
|
||||||
|
const label = String(row.feishuSyncLabel || '').trim();
|
||||||
|
return row.status === '已生效' && (label === '已同步' || isFeishuSynced(row.feishuSyncStatus));
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleReleaseSuccess = (event) => {
|
||||||
|
const releasedVersion = String(event?.detail?.version || '').trim();
|
||||||
|
if (!releasedVersion) return;
|
||||||
|
setWatchReleaseVersionName(releasedVersion);
|
||||||
|
setIsFeishuSyncDoneOpen(false);
|
||||||
|
refreshVersions();
|
||||||
|
};
|
||||||
|
window.addEventListener('fst:release_success', handleReleaseSuccess);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('fst:release_success', handleReleaseSuccess);
|
||||||
|
};
|
||||||
|
}, [refreshVersions]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const targetVersion = watchReleaseVersionName.trim();
|
||||||
|
if (!isActive || !targetVersion) return;
|
||||||
|
|
||||||
|
const matched = (versions || []).find(
|
||||||
|
(row) => String(row.versionName || '').trim() === targetVersion
|
||||||
|
);
|
||||||
|
if (isReleaseRowSynced(matched)) {
|
||||||
|
setIsFeishuSyncDoneOpen(true);
|
||||||
|
setWatchReleaseVersionName('');
|
||||||
|
}
|
||||||
|
}, [versions, isActive, watchReleaseVersionName]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const targetVersion = watchReleaseVersionName.trim();
|
||||||
|
if (!isActive || !targetVersion) return;
|
||||||
|
|
||||||
|
const timer = window.setInterval(() => {
|
||||||
|
refreshVersions();
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.clearInterval(timer);
|
||||||
|
};
|
||||||
|
}, [isActive, watchReleaseVersionName, refreshVersions]);
|
||||||
|
|
||||||
|
const waitFeishuSyncDone = async (id) => {
|
||||||
|
const maxRounds = 40;
|
||||||
|
const intervalMs = 3000;
|
||||||
|
for (let i = 0; i < maxRounds; i += 1) {
|
||||||
|
const latest = await refreshVersions();
|
||||||
|
const target = (latest || []).find((item) => item.id === id);
|
||||||
|
if (target && isFeishuSynced(target.feishuSyncStatus)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (i < maxRounds - 1) {
|
||||||
|
await sleep(intervalMs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVersionExport = async (version) => {
|
||||||
|
try {
|
||||||
|
const stash = await api.getFstStash(
|
||||||
|
version.versionName || version.version || ''
|
||||||
|
);
|
||||||
|
const content =
|
||||||
|
stash && typeof stash.content !== 'undefined' ? stash.content : stash;
|
||||||
|
let exportContent = content;
|
||||||
|
if (exportContent && Array.isArray(exportContent.nodes)) {
|
||||||
|
const nodes = exportContent.nodes || [];
|
||||||
|
const hasNested = nodes.some(
|
||||||
|
(node) => Array.isArray(node.children) && node.children.length > 0
|
||||||
|
);
|
||||||
|
const hasIdOrParent = nodes.some(
|
||||||
|
(node) =>
|
||||||
|
typeof node.id !== 'undefined' ||
|
||||||
|
typeof node.parentId !== 'undefined'
|
||||||
|
);
|
||||||
|
if (!hasNested && hasIdOrParent) {
|
||||||
|
const map = {};
|
||||||
|
const roots = [];
|
||||||
|
nodes.forEach((n) => {
|
||||||
|
if (typeof n.id === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
map[n.id] = {
|
||||||
|
...n,
|
||||||
|
Description: n.Description || n.level || '',
|
||||||
|
children: []
|
||||||
|
};
|
||||||
|
});
|
||||||
|
nodes.forEach((n) => {
|
||||||
|
if (typeof n.id === 'undefined') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const node = map[n.id];
|
||||||
|
if (n.parentId && map[n.parentId]) {
|
||||||
|
map[n.parentId].children.push(node);
|
||||||
|
} else {
|
||||||
|
roots.push(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
exportContent = {
|
||||||
|
...exportContent,
|
||||||
|
nodes: roots
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const jsonText = JSON.stringify(exportContent, null, 2);
|
||||||
|
const blob = new Blob([jsonText], {
|
||||||
|
type: 'application/json'
|
||||||
|
});
|
||||||
|
const url = window.URL.createObjectURL(blob);
|
||||||
|
const link = document.createElement('a');
|
||||||
|
link.href = url;
|
||||||
|
link.download = `Version_${version.versionName || version.id || 'export'}.json`;
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('导出版本文件失败', error);
|
||||||
|
window.alert('导出版本文件失败');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openExportModal = (version) => {
|
||||||
|
setExportTarget(version);
|
||||||
|
setIsExportModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExportCancel = () => {
|
||||||
|
setIsExportModalOpen(false);
|
||||||
|
setExportTarget(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleExportConfirm = async () => {
|
||||||
|
if (!exportTarget) {
|
||||||
|
handleExportCancel();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await handleVersionExport(exportTarget);
|
||||||
|
handleExportCancel();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleVersionActivate = async (id) => {
|
||||||
|
const currentList = versions || [];
|
||||||
|
const target = currentList.find((item) => item.id === id);
|
||||||
|
if (!target || activatingVersionId !== null) return;
|
||||||
|
if (target.status === '已生效') {
|
||||||
|
window.alert('当前版本已生效');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setActivatingVersionId(id);
|
||||||
|
try {
|
||||||
|
await api.activateVersion(id, {});
|
||||||
|
const latest = await refreshVersions();
|
||||||
|
const stillActiveOthers = (latest || []).filter(
|
||||||
|
(item) => item.id !== id && item.status === '已生效'
|
||||||
|
);
|
||||||
|
if (stillActiveOthers.length > 0) {
|
||||||
|
await Promise.all(
|
||||||
|
stillActiveOthers.map((item) =>
|
||||||
|
api.updateVersion(item.id, { status: '未生效' }).catch(() => null)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
await refreshVersions();
|
||||||
|
setExportTarget(null);
|
||||||
|
setActivateTarget(null);
|
||||||
|
setIsExportModalOpen(false);
|
||||||
|
setIsActivateModalOpen(false);
|
||||||
|
|
||||||
|
window.alert('版本已生效，飞书同步任务已开始。');
|
||||||
|
const synced = await waitFeishuSyncDone(id);
|
||||||
|
if (synced) {
|
||||||
|
setIsFeishuSyncDoneOpen(true);
|
||||||
|
} else {
|
||||||
|
window.alert('版本已生效，飞书同步仍在进行中，请稍后查看。');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('版本生效失败', error);
|
||||||
|
window.alert('版本生效失败');
|
||||||
|
} finally {
|
||||||
|
setActivatingVersionId(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const openActivateModal = (version) => {
|
||||||
|
setActivateTarget(version);
|
||||||
|
setIsActivateModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleActivateCancel = () => {
|
||||||
|
if (activatingVersionId !== null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setIsActivateModalOpen(false);
|
||||||
|
setActivateTarget(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleActivateConfirm = async () => {
|
||||||
|
if (!activateTarget) {
|
||||||
|
handleActivateCancel();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
await handleVersionActivate(activateTarget.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="content-header">
|
||||||
|
<h2>Version 列表</h2>
|
||||||
|
</div>
|
||||||
|
<div className="table-container">
|
||||||
|
{isExportModalOpen && (
|
||||||
|
<div className="modal-backdrop">
|
||||||
|
<div className="modal">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h3>导出版本</h3>
|
||||||
|
<button className="modal-close" onClick={handleExportCancel}>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<p>
|
||||||
|
确认导出版本{' '}
|
||||||
|
{exportTarget ? exportTarget.versionName || exportTarget.id : ''}
|
||||||
|
的标签快照吗？
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button className="btn-link" onClick={handleExportCancel}>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button className="btn-link" onClick={handleExportConfirm}>
|
||||||
|
确认导出
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isActivateModalOpen && (
|
||||||
|
<div className="modal-backdrop">
|
||||||
|
<div className="modal">
|
||||||
|
<div className="modal-header">
|
||||||
|
<h3>版本生效</h3>
|
||||||
|
<button
|
||||||
|
className="modal-close"
|
||||||
|
onClick={handleActivateCancel}
|
||||||
|
disabled={activatingVersionId !== null}
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="modal-body">
|
||||||
|
<p>
|
||||||
|
确认将版本{' '}
|
||||||
|
{activateTarget
|
||||||
|
? activateTarget.versionName || activateTarget.id
|
||||||
|
: ''}
|
||||||
|
标记为已生效吗？
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="modal-actions">
|
||||||
|
<button
|
||||||
|
className="btn-link"
|
||||||
|
onClick={handleActivateCancel}
|
||||||
|
disabled={activatingVersionId !== null}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="btn-link"
|
||||||
|
onClick={handleActivateConfirm}
|
||||||
|
disabled={activatingVersionId !== null}
|
||||||
|
>
|
||||||
|
{activatingVersionId !== null ? '生效中...' : '确认生效'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{isFeishuSyncDoneOpen && (
|
||||||
|
<InfoModal
|
||||||
|
open={isFeishuSyncDoneOpen}
|
||||||
|
title="飞书同步"
|
||||||
|
content="飞书同步完成"
|
||||||
|
onClose={() => setIsFeishuSyncDoneOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<table className="data-table version-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Version Name</th>
|
||||||
|
<th>Create Time</th>
|
||||||
|
<th>Update Time</th>
|
||||||
|
<th>Status</th>
|
||||||
|
{/* <th>Feishu Sync</th> */}
|
||||||
|
<th style={{ textAlign: 'left' }}>Operation</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{versions.map((row) => (
|
||||||
|
<tr key={row.id || row.versionName}>
|
||||||
|
<td>{row.versionName}</td>
|
||||||
|
<td>{row.create_time}</td>
|
||||||
|
<td>{row.update_time}</td>
|
||||||
|
<td>{row.status}</td>
|
||||||
|
{/*
|
||||||
|
<td>
|
||||||
|
{(() => {
|
||||||
|
const label = String(row.feishuSyncLabel || '').trim();
|
||||||
|
const synced = label === '已同步' || isFeishuSynced(row.feishuSyncStatus);
|
||||||
|
const showLink = synced && row.status === '已生效';
|
||||||
|
const displayLabel = label || '-';
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<span>{displayLabel}</span>
|
||||||
|
{showLink && (
|
||||||
|
<>
|
||||||
|
{' '}
|
||||||
|
<a
|
||||||
|
href={FEISHU_WIKI_URL}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
链接
|
||||||
|
</a>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
})()}
|
||||||
|
</td>
|
||||||
|
*/}
|
||||||
|
<td style={{ textAlign: 'left' }}>
|
||||||
|
<div className="action-buttons">
|
||||||
|
{(row.status === '已生效' || row.status === '未生效') && (
|
||||||
|
<button
|
||||||
|
className="btn-link"
|
||||||
|
onClick={() => openExportModal(row)}
|
||||||
|
>
|
||||||
|
导出
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="btn-link"
|
||||||
|
disabled={activatingVersionId !== null || row.status === '已生效'}
|
||||||
|
onClick={() => openActivateModal(row)}
|
||||||
|
>
|
||||||
|
{row.status === '已生效'
|
||||||
|
? '已生效'
|
||||||
|
: activatingVersionId === row.id
|
||||||
|
? '生效中...'
|
||||||
|
: '生效'}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default VersionListView;
|
||||||
400
src/hooks/useFstImport.js
Normal file
400
src/hooks/useFstImport.js
Normal file
@@ -0,0 +1,400 @@
|
|||||||
|
import { useState, useRef, useCallback } from 'react';
|
||||||
|
import api from '../services/api';
|
||||||
|
import {
|
||||||
|
buildNextVersionName,
|
||||||
|
collectChangedTreeLevelsFromBaseAndRows
|
||||||
|
} from './useFstRelease';
|
||||||
|
|
||||||
|
const formatDateTime = () => {
|
||||||
|
const date = new Date();
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeSceneValue = (value) => {
|
||||||
|
if (typeof value === 'string') return value;
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value
|
||||||
|
.map((item) => String(item || '').trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(',');
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeTagGroupValue = (value) => {
|
||||||
|
if (typeof value === 'string') return value;
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value
|
||||||
|
.map((item) => String(item || '').trim())
|
||||||
|
.filter(Boolean)
|
||||||
|
.join(',');
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
};
|
||||||
|
|
||||||
|
const useFstImport = ({
|
||||||
|
setRows,
|
||||||
|
setExpandedIds,
|
||||||
|
setEditingId,
|
||||||
|
getCurrentVersion,
|
||||||
|
onImportError
|
||||||
|
}) => {
|
||||||
|
const [isImportSuccessOpen, setIsImportSuccessOpen] = useState(false);
|
||||||
|
const [isImportExampleOpen, setIsImportExampleOpen] = useState(false);
|
||||||
|
const fileInputRef = useRef(null);
|
||||||
|
|
||||||
|
const handleImportClick = useCallback(() => {
|
||||||
|
if (fileInputRef.current) {
|
||||||
|
fileInputRef.current.value = '';
|
||||||
|
fileInputRef.current.click();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const openImportExample = useCallback(() => {
|
||||||
|
setIsImportExampleOpen(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const closeImportExample = useCallback(() => {
|
||||||
|
setIsImportExampleOpen(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const closeImportSuccess = useCallback(() => {
|
||||||
|
setIsImportSuccessOpen(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleFileChange = useCallback(
|
||||||
|
(event) => {
|
||||||
|
const file = event.target.files && event.target.files[0];
|
||||||
|
if (!file) return;
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = async (e) => {
|
||||||
|
try {
|
||||||
|
const text = String(e.target.result || '');
|
||||||
|
const parsed = JSON.parse(text);
|
||||||
|
let nodes = Array.isArray(parsed)
|
||||||
|
? parsed
|
||||||
|
: Array.isArray(parsed.nodes)
|
||||||
|
? parsed.nodes
|
||||||
|
: [];
|
||||||
|
if (
|
||||||
|
Array.isArray(nodes) &&
|
||||||
|
nodes.some(
|
||||||
|
(node) => Array.isArray(node.children) && node.children.length > 0
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
const flat = [];
|
||||||
|
const traverse = (items, level) => {
|
||||||
|
items.forEach((node) => {
|
||||||
|
const treeLevel =
|
||||||
|
typeof node.treeLevel === 'number' && node.treeLevel > 0
|
||||||
|
? node.treeLevel
|
||||||
|
: level;
|
||||||
|
const createTime =
|
||||||
|
node.createtime ||
|
||||||
|
node.create_time ||
|
||||||
|
node.created_time ||
|
||||||
|
node.createTime ||
|
||||||
|
'';
|
||||||
|
const updateTime =
|
||||||
|
node.updateTime ||
|
||||||
|
node.updated_time ||
|
||||||
|
node.update_time ||
|
||||||
|
node.updateTime ||
|
||||||
|
createTime ||
|
||||||
|
'';
|
||||||
|
flat.push({
|
||||||
|
name: node.name || node.stsName || '',
|
||||||
|
level: node.Description || node.level || '',
|
||||||
|
scene: normalizeSceneValue(node.scene || node.Scene),
|
||||||
|
taggroup: normalizeTagGroupValue(
|
||||||
|
node.taggroup || node.tagGroup || node.TagGroup
|
||||||
|
),
|
||||||
|
createtime: createTime,
|
||||||
|
updateTime,
|
||||||
|
deleted:
|
||||||
|
typeof node.deleted === 'number'
|
||||||
|
? node.deleted
|
||||||
|
: Number(node.deleted) || 0,
|
||||||
|
treeLevel
|
||||||
|
});
|
||||||
|
if (Array.isArray(node.children) && node.children.length > 0) {
|
||||||
|
traverse(node.children, treeLevel + 1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
traverse(nodes, 1);
|
||||||
|
nodes = flat;
|
||||||
|
}
|
||||||
|
if (!nodes.length) {
|
||||||
|
if (onImportError) {
|
||||||
|
onImportError('JSON 中没有有效的节点数据');
|
||||||
|
} else {
|
||||||
|
window.alert('JSON 中没有有效的节点数据');
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const now = formatDateTime();
|
||||||
|
const importedRows = [];
|
||||||
|
const lastIdForLevel = {};
|
||||||
|
let nextId = 0;
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
const name = node.name || node.stsName || '';
|
||||||
|
if (!name) return;
|
||||||
|
const treeLevel =
|
||||||
|
typeof node.treeLevel === 'number' && node.treeLevel > 0
|
||||||
|
? node.treeLevel
|
||||||
|
: 1;
|
||||||
|
const parentRowId =
|
||||||
|
treeLevel > 1 && lastIdForLevel[treeLevel - 1]
|
||||||
|
? lastIdForLevel[treeLevel - 1]
|
||||||
|
: null;
|
||||||
|
nextId += 1;
|
||||||
|
const createTime =
|
||||||
|
node.createtime ||
|
||||||
|
node.create_time ||
|
||||||
|
node.created_time ||
|
||||||
|
node.createTime ||
|
||||||
|
now;
|
||||||
|
const updateTime =
|
||||||
|
node.updateTime ||
|
||||||
|
node.updated_time ||
|
||||||
|
node.update_time ||
|
||||||
|
node.updateTime ||
|
||||||
|
createTime ||
|
||||||
|
now;
|
||||||
|
const row = {
|
||||||
|
id: nextId,
|
||||||
|
stsName: String(name),
|
||||||
|
level: node.Description || node.level || '',
|
||||||
|
scene: normalizeSceneValue(node.scene || node.Scene),
|
||||||
|
taggroup: normalizeTagGroupValue(
|
||||||
|
node.taggroup || node.tagGroup || node.TagGroup
|
||||||
|
),
|
||||||
|
createtime: createTime,
|
||||||
|
updateTime,
|
||||||
|
parentId: parentRowId,
|
||||||
|
deleted:
|
||||||
|
typeof node.deleted === 'number'
|
||||||
|
? node.deleted
|
||||||
|
: Number(node.deleted) || 0,
|
||||||
|
treeLevel
|
||||||
|
};
|
||||||
|
importedRows.push(row);
|
||||||
|
lastIdForLevel[treeLevel] = row.id;
|
||||||
|
});
|
||||||
|
let versionForStash = '';
|
||||||
|
try {
|
||||||
|
const baseVersionName =
|
||||||
|
(typeof getCurrentVersion === 'function'
|
||||||
|
? await getCurrentVersion()
|
||||||
|
: '') || '';
|
||||||
|
let changedLevels = new Set();
|
||||||
|
if (baseVersionName) {
|
||||||
|
try {
|
||||||
|
const baseStash = await api.getFstStash(baseVersionName);
|
||||||
|
changedLevels = collectChangedTreeLevelsFromBaseAndRows(
|
||||||
|
baseStash,
|
||||||
|
importedRows
|
||||||
|
);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
versionForStash = buildNextVersionName(baseVersionName, changedLevels);
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
// 兜底：如果自动生成失败，再回退到导入文件自带版本号。
|
||||||
|
if (
|
||||||
|
!versionForStash &&
|
||||||
|
parsed &&
|
||||||
|
typeof parsed.version === 'string' &&
|
||||||
|
parsed.version.trim()
|
||||||
|
) {
|
||||||
|
versionForStash = parsed.version.trim();
|
||||||
|
}
|
||||||
|
let stashWritten = false;
|
||||||
|
if (versionForStash) {
|
||||||
|
const stashContent =
|
||||||
|
Array.isArray(parsed) || Array.isArray(parsed.nodes)
|
||||||
|
? {
|
||||||
|
nodes:
|
||||||
|
Array.isArray(parsed.nodes) && parsed.nodes.length > 0
|
||||||
|
? parsed.nodes
|
||||||
|
: nodes,
|
||||||
|
meta:
|
||||||
|
(parsed &&
|
||||||
|
parsed.meta &&
|
||||||
|
typeof parsed.meta === 'object'
|
||||||
|
? parsed.meta
|
||||||
|
: {}) || {}
|
||||||
|
}
|
||||||
|
: parsed;
|
||||||
|
if (!Array.isArray(stashContent.nodes)) {
|
||||||
|
stashContent.nodes = nodes;
|
||||||
|
}
|
||||||
|
stashContent.meta = {
|
||||||
|
...(stashContent.meta || {}),
|
||||||
|
imported_at: now
|
||||||
|
};
|
||||||
|
|
||||||
|
try {
|
||||||
|
const versionsRes = await api.getVersions();
|
||||||
|
const list = Array.isArray(versionsRes)
|
||||||
|
? versionsRes
|
||||||
|
: versionsRes &&
|
||||||
|
versionsRes.data &&
|
||||||
|
Array.isArray(versionsRes.data)
|
||||||
|
? versionsRes.data
|
||||||
|
: [];
|
||||||
|
const exists = list.some((item) => {
|
||||||
|
const name =
|
||||||
|
(item && (item.version || item.versionName)) || '';
|
||||||
|
return (
|
||||||
|
typeof name === 'string' &&
|
||||||
|
name.trim() === versionForStash
|
||||||
|
);
|
||||||
|
});
|
||||||
|
if (exists) {
|
||||||
|
const msg = `版本 ${versionForStash} 已存在，请修改导入文件中的版本号后重试。`;
|
||||||
|
if (onImportError) {
|
||||||
|
onImportError(msg);
|
||||||
|
} else {
|
||||||
|
window.alert(`导入失败：${msg}`);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await api.createVersion({
|
||||||
|
version: versionForStash,
|
||||||
|
description:
|
||||||
|
(stashContent.meta && stashContent.meta.remark) || '导入版本',
|
||||||
|
type: 'production',
|
||||||
|
release_date: now,
|
||||||
|
created_time: now,
|
||||||
|
update_time: now,
|
||||||
|
status: '已生效'
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
const versionsRes2 = await api.getVersions();
|
||||||
|
const list2 = Array.isArray(versionsRes2)
|
||||||
|
? versionsRes2
|
||||||
|
: versionsRes2 &&
|
||||||
|
versionsRes2.data &&
|
||||||
|
Array.isArray(versionsRes2.data)
|
||||||
|
? versionsRes2.data
|
||||||
|
: [];
|
||||||
|
const targets = list2.filter((item) => {
|
||||||
|
const name =
|
||||||
|
(item && (item.version || item.versionName)) || '';
|
||||||
|
return (
|
||||||
|
typeof name === 'string' &&
|
||||||
|
name.trim() === versionForStash
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const targetIds = targets
|
||||||
|
.map((item) => item && item.id)
|
||||||
|
.filter((id) => typeof id !== 'undefined');
|
||||||
|
const othersToDeactivate = list2.filter((item) => {
|
||||||
|
if (!item || typeof item.id === 'undefined') return false;
|
||||||
|
const name =
|
||||||
|
(item.version || item.versionName || '').trim();
|
||||||
|
return (
|
||||||
|
name !== versionForStash && item.status === '已生效'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const updates = [];
|
||||||
|
targetIds.forEach((id) => {
|
||||||
|
updates.push(
|
||||||
|
api.updateVersion(id, {
|
||||||
|
status: '已生效'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
othersToDeactivate.forEach((item) => {
|
||||||
|
updates.push(
|
||||||
|
api.updateVersion(item.id, {
|
||||||
|
status: '未生效'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
if (updates.length > 0) {
|
||||||
|
try {
|
||||||
|
await Promise.all(updates);
|
||||||
|
} catch (e3) {}
|
||||||
|
}
|
||||||
|
} catch (e2) {}
|
||||||
|
} catch (err) {
|
||||||
|
console.error('导入时创建版本失败（可能已存在）', err);
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await api.upsertFstStash({
|
||||||
|
version: versionForStash,
|
||||||
|
content: stashContent
|
||||||
|
});
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem(
|
||||||
|
'fst_current_version',
|
||||||
|
versionForStash
|
||||||
|
);
|
||||||
|
window.localStorage.setItem(
|
||||||
|
'fst_data_sync_at',
|
||||||
|
String(Date.now())
|
||||||
|
);
|
||||||
|
} catch (e2) {}
|
||||||
|
stashWritten = true;
|
||||||
|
} catch (err) {
|
||||||
|
console.error('写入 fst_stash 失败', err);
|
||||||
|
const msg =
|
||||||
|
(err &&
|
||||||
|
err.response &&
|
||||||
|
(err.response.data?.message || err.response.data)) ||
|
||||||
|
err.message ||
|
||||||
|
'写入 fst_stash 失败，请检查网络或后端服务';
|
||||||
|
if (onImportError) {
|
||||||
|
onImportError(String(msg));
|
||||||
|
} else {
|
||||||
|
window.alert(String(msg));
|
||||||
|
}
|
||||||
|
// 写入失败时，不更新前端数据，保持原有状态
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 没有版本号（仅本地导入），或已经成功写入 fst_stash 时，再更新前端数据
|
||||||
|
setRows(importedRows);
|
||||||
|
setExpandedIds(importedRows.map((row) => row.id));
|
||||||
|
if (setEditingId) {
|
||||||
|
setEditingId(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
setIsImportSuccessOpen(true);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('导入 JSON 失败', error);
|
||||||
|
window.alert('导入 JSON 失败，请检查文件格式是否正确');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.readAsText(file, 'utf-8');
|
||||||
|
},
|
||||||
|
[setRows, setExpandedIds, setEditingId]
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
fileInputRef,
|
||||||
|
isImportSuccessOpen,
|
||||||
|
isImportExampleOpen,
|
||||||
|
handleImportClick,
|
||||||
|
openImportExample,
|
||||||
|
closeImportExample,
|
||||||
|
closeImportSuccess,
|
||||||
|
handleFileChange
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useFstImport;
|
||||||
648
src/hooks/useFstRelease.js
Normal file
648
src/hooks/useFstRelease.js
Normal file
@@ -0,0 +1,648 @@
|
|||||||
|
import { useState, useCallback } from 'react';
|
||||||
|
import api from '../services/api';
|
||||||
|
|
||||||
|
const VERSION_SEGMENT_COUNT = 5;
|
||||||
|
|
||||||
|
const toFiveVersionSegments = (versionName) => {
|
||||||
|
const cleaned = String(versionName || '')
|
||||||
|
.replace(/_editing_temp$/i, '')
|
||||||
|
.trim();
|
||||||
|
const numericPartMatch = cleaned.match(/\d+(?:\.\d+)*/);
|
||||||
|
const numericPart = numericPartMatch ? numericPartMatch[0] : '';
|
||||||
|
const parts = numericPart
|
||||||
|
? numericPart
|
||||||
|
.split('.')
|
||||||
|
.map((part) => Number.parseInt(part, 10))
|
||||||
|
.filter((n) => Number.isFinite(n) && n >= 0)
|
||||||
|
: [];
|
||||||
|
const normalized = parts.slice(0, VERSION_SEGMENT_COUNT);
|
||||||
|
while (normalized.length < VERSION_SEGMENT_COUNT) {
|
||||||
|
normalized.push(0);
|
||||||
|
}
|
||||||
|
return normalized;
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeTreeLevel = (value) => {
|
||||||
|
const n = Number.parseInt(value, 10);
|
||||||
|
if (!Number.isFinite(n) || n <= 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
// 业务要求：treeLevel 超过 5 统一按第 5 段处理。
|
||||||
|
return Math.min(n, VERSION_SEGMENT_COUNT);
|
||||||
|
};
|
||||||
|
|
||||||
|
const inferTreeLevelFromPath = (path) => {
|
||||||
|
if (typeof path !== 'string' || !path.trim()) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const text = path.trim();
|
||||||
|
const separators = ['->', '>', '/', '|'];
|
||||||
|
let bestDepth = 0;
|
||||||
|
separators.forEach((sep) => {
|
||||||
|
if (!text.includes(sep)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const depth = text
|
||||||
|
.split(sep)
|
||||||
|
.map((item) => item.trim())
|
||||||
|
.filter(Boolean).length;
|
||||||
|
if (depth > bestDepth) {
|
||||||
|
bestDepth = depth;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
if (bestDepth <= 0) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return normalizeTreeLevel(bestDepth);
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractLevelFromDiffItem = (item) => {
|
||||||
|
if (!item) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (typeof item === 'number' || typeof item === 'string') {
|
||||||
|
return normalizeTreeLevel(item);
|
||||||
|
}
|
||||||
|
const candidates = [
|
||||||
|
item.treeLevel,
|
||||||
|
item.node && item.node.treeLevel,
|
||||||
|
item.before && item.before.treeLevel,
|
||||||
|
item.after && item.after.treeLevel,
|
||||||
|
item.old && item.old.treeLevel,
|
||||||
|
item.new && item.new.treeLevel,
|
||||||
|
item.new && item.new.treeLevel
|
||||||
|
];
|
||||||
|
for (const candidate of candidates) {
|
||||||
|
const normalized = normalizeTreeLevel(candidate);
|
||||||
|
if (normalized) {
|
||||||
|
return normalized;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const pathCandidates = [
|
||||||
|
item.path,
|
||||||
|
item.node && item.node.path,
|
||||||
|
item.before && item.before.path,
|
||||||
|
item.after && item.after.path
|
||||||
|
];
|
||||||
|
for (const path of pathCandidates) {
|
||||||
|
const inferred = inferTreeLevelFromPath(path);
|
||||||
|
if (inferred) {
|
||||||
|
return inferred;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const diffHasAnyChanges = (diff) => {
|
||||||
|
if (!diff || typeof diff !== 'object') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const summary = diff.summary || {};
|
||||||
|
const summaryTotal =
|
||||||
|
Number(summary.added_count || 0) +
|
||||||
|
Number(summary.removed_count || 0) +
|
||||||
|
Number(summary.changed_count || 0);
|
||||||
|
if (summaryTotal > 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
const added = Array.isArray(diff.added) ? diff.added.length : 0;
|
||||||
|
const removed = Array.isArray(diff.removed) ? diff.removed.length : 0;
|
||||||
|
const changed = Array.isArray(diff.changed) ? diff.changed.length : 0;
|
||||||
|
return added + removed + changed > 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const collectChangedTreeLevels = (diff) => {
|
||||||
|
const levelSet = new Set();
|
||||||
|
if (!diff || typeof diff !== 'object') {
|
||||||
|
return levelSet;
|
||||||
|
}
|
||||||
|
const summary = diff.summary || {};
|
||||||
|
if (Array.isArray(summary.changed_tree_levels)) {
|
||||||
|
summary.changed_tree_levels.forEach((level) => {
|
||||||
|
const normalized = normalizeTreeLevel(level);
|
||||||
|
if (normalized) {
|
||||||
|
levelSet.add(normalized);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
['added', 'removed', 'changed'].forEach((key) => {
|
||||||
|
const list = Array.isArray(diff[key]) ? diff[key] : [];
|
||||||
|
list.forEach((item) => {
|
||||||
|
const level = extractLevelFromDiffItem(item);
|
||||||
|
if (level) {
|
||||||
|
levelSet.add(level);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return levelSet;
|
||||||
|
};
|
||||||
|
|
||||||
|
const extractNodesFromStashResponse = (raw) => {
|
||||||
|
if (Array.isArray(raw)) {
|
||||||
|
return raw;
|
||||||
|
}
|
||||||
|
if (raw && Array.isArray(raw.data)) {
|
||||||
|
return raw.data;
|
||||||
|
}
|
||||||
|
if (raw && Array.isArray(raw.nodes)) {
|
||||||
|
return raw.nodes;
|
||||||
|
}
|
||||||
|
if (raw && raw.content && Array.isArray(raw.content.nodes)) {
|
||||||
|
return raw.content.nodes;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeDeleted = (node) => {
|
||||||
|
if (!node) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
if (typeof node.deleted === 'number') {
|
||||||
|
return node.deleted;
|
||||||
|
}
|
||||||
|
return Number(node.deleted) || 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const flattenStashNodes = (nodes, parentPath = '', depth = 1, map = new Map()) => {
|
||||||
|
if (!Array.isArray(nodes)) {
|
||||||
|
return map;
|
||||||
|
}
|
||||||
|
nodes.forEach((node) => {
|
||||||
|
if (!node || normalizeDeleted(node) === 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const name = String(node.name || node.label || node.id || '').trim() || 'unknown';
|
||||||
|
const level =
|
||||||
|
normalizeTreeLevel(node.treeLevel || node.tree_level || depth) ||
|
||||||
|
normalizeTreeLevel(depth) ||
|
||||||
|
1;
|
||||||
|
const path = parentPath ? `${parentPath}>${name}` : name;
|
||||||
|
map.set(path, {
|
||||||
|
level,
|
||||||
|
description: String(node.Description || node.description || '').trim(),
|
||||||
|
scene: String(node.scene || '').trim(),
|
||||||
|
taggroup: String(node.taggroup || node.tagGroup || '').trim()
|
||||||
|
});
|
||||||
|
const children = Array.isArray(node.children) ? node.children : [];
|
||||||
|
flattenStashNodes(children, path, depth + 1, map);
|
||||||
|
});
|
||||||
|
return map;
|
||||||
|
};
|
||||||
|
|
||||||
|
const flattenActiveRows = (rows) => {
|
||||||
|
const list = Array.isArray(rows) ? rows : [];
|
||||||
|
const activeRows = list.filter((row) => normalizeDeleted(row) !== 1);
|
||||||
|
const idToRow = new Map();
|
||||||
|
activeRows.forEach((row) => {
|
||||||
|
idToRow.set(row.id, row);
|
||||||
|
});
|
||||||
|
const pathMemo = new Map();
|
||||||
|
const buildPath = (row) => {
|
||||||
|
if (!row) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
if (pathMemo.has(row.id)) {
|
||||||
|
return pathMemo.get(row.id);
|
||||||
|
}
|
||||||
|
const name = String(row.stsName || row.name || row.id || '').trim() || 'unknown';
|
||||||
|
const parent = row.parentId != null ? idToRow.get(row.parentId) : null;
|
||||||
|
const parentPath = parent ? buildPath(parent) : '';
|
||||||
|
const path = parentPath ? `${parentPath}>${name}` : name;
|
||||||
|
pathMemo.set(row.id, path);
|
||||||
|
return path;
|
||||||
|
};
|
||||||
|
|
||||||
|
const map = new Map();
|
||||||
|
activeRows.forEach((row) => {
|
||||||
|
const path = buildPath(row);
|
||||||
|
const level = normalizeTreeLevel(row.treeLevel) || 1;
|
||||||
|
map.set(path, {
|
||||||
|
level,
|
||||||
|
description: String(row.level || row.Description || '').trim(),
|
||||||
|
scene: String(row.scene || '').trim(),
|
||||||
|
taggroup: String(row.taggroup || row.tagGroup || '').trim()
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return map;
|
||||||
|
};
|
||||||
|
|
||||||
|
const collectChangedTreeLevelsBetweenMaps = (beforeMap, afterMap) => {
|
||||||
|
const levels = new Set();
|
||||||
|
const allKeys = new Set([...(beforeMap ? beforeMap.keys() : []), ...(afterMap ? afterMap.keys() : [])]);
|
||||||
|
|
||||||
|
allKeys.forEach((key) => {
|
||||||
|
const before = beforeMap ? beforeMap.get(key) : null;
|
||||||
|
const after = afterMap ? afterMap.get(key) : null;
|
||||||
|
if (!before && after) {
|
||||||
|
levels.add(after.level);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (before && !after) {
|
||||||
|
levels.add(before.level);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (before && after) {
|
||||||
|
if (
|
||||||
|
before.description !== after.description ||
|
||||||
|
before.scene !== after.scene ||
|
||||||
|
before.taggroup !== after.taggroup
|
||||||
|
) {
|
||||||
|
levels.add(after.level || before.level);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return levels;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const collectChangedTreeLevelsFromBaseAndRows = (baseStash, rows) => {
|
||||||
|
const baseNodes = extractNodesFromStashResponse(baseStash);
|
||||||
|
const baseMap = flattenStashNodes(baseNodes);
|
||||||
|
const currentMap = flattenActiveRows(rows);
|
||||||
|
return collectChangedTreeLevelsBetweenMaps(baseMap, currentMap);
|
||||||
|
};
|
||||||
|
|
||||||
|
const collectChangedTreeLevelsFromStash = (baseStash, editStash) => {
|
||||||
|
const levels = new Set();
|
||||||
|
const baseNodes = extractNodesFromStashResponse(baseStash);
|
||||||
|
const editNodes = extractNodesFromStashResponse(editStash);
|
||||||
|
const baseMap = flattenStashNodes(baseNodes);
|
||||||
|
const editMap = flattenStashNodes(editNodes);
|
||||||
|
const allKeys = new Set([...baseMap.keys(), ...editMap.keys()]);
|
||||||
|
|
||||||
|
allKeys.forEach((key) => {
|
||||||
|
const before = baseMap.get(key);
|
||||||
|
const after = editMap.get(key);
|
||||||
|
if (!before && after) {
|
||||||
|
levels.add(after.level);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (before && !after) {
|
||||||
|
levels.add(before.level);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (before && after) {
|
||||||
|
if (
|
||||||
|
before.description !== after.description ||
|
||||||
|
before.scene !== after.scene ||
|
||||||
|
before.taggroup !== after.taggroup
|
||||||
|
) {
|
||||||
|
levels.add(after.level || before.level);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return levels;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const buildNextVersionName = (baseVersionName, changedLevels) => {
|
||||||
|
const hasBaseVersion = String(baseVersionName || '').trim().length > 0;
|
||||||
|
if (!hasBaseVersion) {
|
||||||
|
return '0.0.0.0.0';
|
||||||
|
}
|
||||||
|
// 在上一个版本基础上按层级递增。
|
||||||
|
const segments = toFiveVersionSegments(baseVersionName);
|
||||||
|
if (!changedLevels || changedLevels.size === 0) {
|
||||||
|
// 未识别到差异层级时，默认递增第 5 段。
|
||||||
|
segments[VERSION_SEGMENT_COUNT - 1] += 1;
|
||||||
|
return segments.join('.');
|
||||||
|
}
|
||||||
|
changedLevels.forEach((level) => {
|
||||||
|
const index = Math.min(Math.max(level, 1), VERSION_SEGMENT_COUNT) - 1;
|
||||||
|
segments[index] += 1;
|
||||||
|
});
|
||||||
|
return segments.join('.');
|
||||||
|
};
|
||||||
|
|
||||||
|
const useFstRelease = ({
|
||||||
|
rows,
|
||||||
|
getCurrentVersion,
|
||||||
|
ensureEditingVersion,
|
||||||
|
setCurrentVersion,
|
||||||
|
setEditingVersion,
|
||||||
|
onReleaseError
|
||||||
|
}) => {
|
||||||
|
const [isReleaseModalOpen, setIsReleaseModalOpen] = useState(false);
|
||||||
|
const [isReleaseSyncingOpen, setIsReleaseSyncingOpen] = useState(false);
|
||||||
|
const [isReleaseSuccessOpen, setIsReleaseSuccessOpen] = useState(false);
|
||||||
|
const [releaseForm, setReleaseForm] = useState({
|
||||||
|
versionName: '',
|
||||||
|
remark: ''
|
||||||
|
});
|
||||||
|
const [releaseDiff, setReleaseDiff] = useState(null);
|
||||||
|
const [releaseDiffExpanded, setReleaseDiffExpanded] = useState({
|
||||||
|
added: false,
|
||||||
|
removed: false,
|
||||||
|
changed: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const openRelease = useCallback(async () => {
|
||||||
|
let nextVersionName = '0.0.0.0.0';
|
||||||
|
try {
|
||||||
|
const baseVersionName = await getCurrentVersion();
|
||||||
|
await ensureEditingVersion();
|
||||||
|
let changedLevels = new Set();
|
||||||
|
if (baseVersionName) {
|
||||||
|
try {
|
||||||
|
const baseStash = await api.getFstStash(baseVersionName);
|
||||||
|
changedLevels = collectChangedTreeLevelsFromBaseAndRows(baseStash, rows);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
nextVersionName = buildNextVersionName(baseVersionName, changedLevels);
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
console.info('[release-version]', {
|
||||||
|
baseVersionName,
|
||||||
|
changedLevels: Array.from(changedLevels),
|
||||||
|
nextVersionName
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
// 打开弹窗时强制覆盖版本号，避免沿用历史输入。
|
||||||
|
setReleaseForm({
|
||||||
|
versionName: nextVersionName,
|
||||||
|
remark: `这是新生成的版本号{${nextVersionName}}`
|
||||||
|
});
|
||||||
|
setIsReleaseModalOpen(true);
|
||||||
|
}, [getCurrentVersion, ensureEditingVersion, rows]);
|
||||||
|
|
||||||
|
const closeRelease = useCallback(() => {
|
||||||
|
setIsReleaseModalOpen(false);
|
||||||
|
setReleaseForm({ versionName: '', remark: '' });
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const closeReleaseSuccess = useCallback(() => {
|
||||||
|
setIsReleaseSuccessOpen(false);
|
||||||
|
setReleaseDiff(null);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const toggleDiffSection = useCallback((key) => {
|
||||||
|
setReleaseDiffExpanded((prev) => ({
|
||||||
|
...prev,
|
||||||
|
[key]: !prev[key]
|
||||||
|
}));
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleReleaseConfirm = useCallback(async () => {
|
||||||
|
if (!releaseForm.versionName || !releaseForm.versionName.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setIsReleaseModalOpen(false);
|
||||||
|
setIsReleaseSyncingOpen(true);
|
||||||
|
const now = new Date().toISOString();
|
||||||
|
const versionName = releaseForm.versionName.trim();
|
||||||
|
let releasedVersionId = null;
|
||||||
|
try {
|
||||||
|
const baseVersionName = await getCurrentVersion();
|
||||||
|
const editVersionName = await ensureEditingVersion();
|
||||||
|
const activeRows = rows;
|
||||||
|
const nodes = activeRows.map((row) => ({
|
||||||
|
name: row.stsName,
|
||||||
|
Description: row.level,
|
||||||
|
createtime: row.createtime,
|
||||||
|
updateTime: row.updateTime,
|
||||||
|
deleted: row.deleted,
|
||||||
|
treeLevel: row.treeLevel,
|
||||||
|
scene: row.scene || '',
|
||||||
|
taggroup: row.taggroup || '',
|
||||||
|
children: []
|
||||||
|
}));
|
||||||
|
const idToIndex = {};
|
||||||
|
activeRows.forEach((row, index) => {
|
||||||
|
if (row.id == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!Object.prototype.hasOwnProperty.call(idToIndex, row.id)) {
|
||||||
|
idToIndex[row.id] = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const roots = [];
|
||||||
|
activeRows.forEach((row, index) => {
|
||||||
|
const node = nodes[index];
|
||||||
|
if (
|
||||||
|
row.parentId != null &&
|
||||||
|
Object.prototype.hasOwnProperty.call(idToIndex, row.parentId)
|
||||||
|
) {
|
||||||
|
const parentNode = nodes[idToIndex[row.parentId]];
|
||||||
|
parentNode.children.push(node);
|
||||||
|
} else {
|
||||||
|
roots.push(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const createRes = await api.createVersion({
|
||||||
|
version: versionName,
|
||||||
|
description: releaseForm.remark || '',
|
||||||
|
type: 'production',
|
||||||
|
release_date: now,
|
||||||
|
created_time: now,
|
||||||
|
update_time: now,
|
||||||
|
status: '已生效'
|
||||||
|
});
|
||||||
|
if (createRes && typeof createRes.id !== 'undefined') {
|
||||||
|
releasedVersionId = createRes.id;
|
||||||
|
} else if (
|
||||||
|
createRes &&
|
||||||
|
createRes.data &&
|
||||||
|
typeof createRes.data.id !== 'undefined'
|
||||||
|
) {
|
||||||
|
releasedVersionId = createRes.data.id;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const versionsRes = await api.getVersions();
|
||||||
|
const list = Array.isArray(versionsRes)
|
||||||
|
? versionsRes
|
||||||
|
: versionsRes &&
|
||||||
|
versionsRes.data &&
|
||||||
|
Array.isArray(versionsRes.data)
|
||||||
|
? versionsRes.data
|
||||||
|
: [];
|
||||||
|
const targets = list.filter((item) => {
|
||||||
|
const name =
|
||||||
|
(item && (item.version || item.versionName)) || '';
|
||||||
|
return typeof name === 'string' && name.trim() === versionName;
|
||||||
|
});
|
||||||
|
const targetIds = targets
|
||||||
|
.map((item) => item && item.id)
|
||||||
|
.filter((id) => typeof id !== 'undefined');
|
||||||
|
if (targetIds.length > 0) {
|
||||||
|
releasedVersionId = targetIds[0];
|
||||||
|
}
|
||||||
|
const othersToDeactivate = list.filter((item) => {
|
||||||
|
if (!item || typeof item.id === 'undefined') return false;
|
||||||
|
const name =
|
||||||
|
(item.version || item.versionName || '').trim();
|
||||||
|
return (
|
||||||
|
name !== versionName && item.status === '已生效'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
const updates = [];
|
||||||
|
targetIds.forEach((id) => {
|
||||||
|
updates.push(
|
||||||
|
api.updateVersion(id, {
|
||||||
|
status: '已生效'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
othersToDeactivate.forEach((item) => {
|
||||||
|
updates.push(
|
||||||
|
api.updateVersion(item.id, {
|
||||||
|
status: '未生效'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
if (updates.length > 0) {
|
||||||
|
try {
|
||||||
|
await Promise.all(updates);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
const stashContent = {
|
||||||
|
nodes: roots,
|
||||||
|
meta: {
|
||||||
|
remark: releaseForm.remark || '',
|
||||||
|
released_at: now
|
||||||
|
}
|
||||||
|
};
|
||||||
|
await api.upsertFstStash({
|
||||||
|
version: versionName,
|
||||||
|
content: stashContent
|
||||||
|
});
|
||||||
|
|
||||||
|
// Release 时版本默认已生效：主动触发一次 activate，启动后端飞书异步同步任务。
|
||||||
|
if (releasedVersionId !== null && typeof releasedVersionId !== 'undefined') {
|
||||||
|
try {
|
||||||
|
await api.activateVersion(releasedVersionId, {});
|
||||||
|
} catch (syncError) {
|
||||||
|
console.error('触发飞书同步失败', syncError);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let diffResult = null;
|
||||||
|
if (editVersionName) {
|
||||||
|
try {
|
||||||
|
await api.upsertFstStash({
|
||||||
|
version: editVersionName,
|
||||||
|
content: stashContent
|
||||||
|
});
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
if (baseVersionName && editVersionName) {
|
||||||
|
try {
|
||||||
|
diffResult = await api.getFstStashDiff(
|
||||||
|
baseVersionName,
|
||||||
|
editVersionName
|
||||||
|
);
|
||||||
|
if (diffResult && diffResult.summary) {
|
||||||
|
diffResult = {
|
||||||
|
...diffResult,
|
||||||
|
summary: {
|
||||||
|
...diffResult.summary,
|
||||||
|
from_version: baseVersionName,
|
||||||
|
to_version: versionName
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error('获取版本差异失败', e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem('fst_current_version', versionName);
|
||||||
|
window.localStorage.removeItem('fst_edit_version');
|
||||||
|
window.localStorage.setItem(
|
||||||
|
'fst_data_sync_at',
|
||||||
|
String(Date.now())
|
||||||
|
);
|
||||||
|
if (editVersionName) {
|
||||||
|
try {
|
||||||
|
const versionsRes = await api.getVersions();
|
||||||
|
const list = Array.isArray(versionsRes)
|
||||||
|
? versionsRes
|
||||||
|
: (versionsRes &&
|
||||||
|
versionsRes.data &&
|
||||||
|
Array.isArray(versionsRes.data)
|
||||||
|
? versionsRes.data
|
||||||
|
: []);
|
||||||
|
const editItem = list.find((v) => {
|
||||||
|
const n = v.version || v.versionName || '';
|
||||||
|
return n === editVersionName;
|
||||||
|
});
|
||||||
|
if (editItem && typeof editItem.id !== 'undefined') {
|
||||||
|
await api.deleteVersion(editItem.id);
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
if (setCurrentVersion) {
|
||||||
|
setCurrentVersion(versionName);
|
||||||
|
}
|
||||||
|
if (setEditingVersion) {
|
||||||
|
setEditingVersion('');
|
||||||
|
}
|
||||||
|
setReleaseDiff(diffResult);
|
||||||
|
setIsReleaseSyncingOpen(false);
|
||||||
|
setReleaseForm({ versionName: '', remark: '' });
|
||||||
|
setIsReleaseSuccessOpen(true);
|
||||||
|
try {
|
||||||
|
window.dispatchEvent(
|
||||||
|
new CustomEvent('fst:release_success', {
|
||||||
|
detail: {
|
||||||
|
version: versionName
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} catch (e) {}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Release 失败', error);
|
||||||
|
const status =
|
||||||
|
(error && error.response && error.response.status) || 0;
|
||||||
|
const raw =
|
||||||
|
(error &&
|
||||||
|
error.response &&
|
||||||
|
(error.response.data?.message || error.response.data)) ||
|
||||||
|
error.message;
|
||||||
|
let msg = '发布失败，保存标签或创建版本时出错，请稍后重试。';
|
||||||
|
if (typeof raw === 'string' && raw.trim()) {
|
||||||
|
msg = `创建版本失败：${raw.trim()}`;
|
||||||
|
} else if (status === 400 || status === 404) {
|
||||||
|
msg =
|
||||||
|
'刚刚有其他人发布了最新版本，当前发布操作未生效。请刷新页面后，在最新版本上重新发布。';
|
||||||
|
}
|
||||||
|
// 出错时关闭 Release 弹窗
|
||||||
|
setIsReleaseModalOpen(false);
|
||||||
|
setIsReleaseSyncingOpen(false);
|
||||||
|
setReleaseForm({ versionName: '', remark: '' });
|
||||||
|
if (onReleaseError) {
|
||||||
|
onReleaseError(msg);
|
||||||
|
} else {
|
||||||
|
window.alert(msg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
releaseForm.versionName,
|
||||||
|
releaseForm.remark,
|
||||||
|
rows,
|
||||||
|
getCurrentVersion,
|
||||||
|
ensureEditingVersion,
|
||||||
|
setCurrentVersion,
|
||||||
|
setEditingVersion,
|
||||||
|
onReleaseError
|
||||||
|
]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
isReleaseModalOpen,
|
||||||
|
isReleaseSyncingOpen,
|
||||||
|
isReleaseSuccessOpen,
|
||||||
|
releaseForm,
|
||||||
|
releaseDiff,
|
||||||
|
releaseDiffExpanded,
|
||||||
|
setReleaseForm,
|
||||||
|
openRelease,
|
||||||
|
closeRelease,
|
||||||
|
closeReleaseSuccess,
|
||||||
|
toggleDiffSection,
|
||||||
|
handleReleaseConfirm
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useFstRelease;
|
||||||
781
src/hooks/useFstTree.js
Normal file
781
src/hooks/useFstTree.js
Normal file
@@ -0,0 +1,781 @@
|
|||||||
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
import api from '../services/api';
|
||||||
|
|
||||||
|
const ROOT_NAME = 'MB Driving FST V1';
|
||||||
|
const nameIdCache = {};
|
||||||
|
|
||||||
|
const formatDateTime = () => {
|
||||||
|
const date = new Date();
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const buildStashContentFromRows = (rows) => {
|
||||||
|
const activeRows = rows.filter((row) => row.deleted === 0);
|
||||||
|
const nodes = activeRows.map((row) => ({
|
||||||
|
...(row.dbId ? { id: row.dbId } : {}),
|
||||||
|
name: row.stsName,
|
||||||
|
Description: row.level,
|
||||||
|
createtime: row.createtime,
|
||||||
|
updateTime: row.updateTime,
|
||||||
|
deleted: row.deleted,
|
||||||
|
treeLevel: row.treeLevel,
|
||||||
|
scene: row.scene || '',
|
||||||
|
taggroup: row.taggroup || '',
|
||||||
|
children: []
|
||||||
|
}));
|
||||||
|
const idToIndex = {};
|
||||||
|
activeRows.forEach((row, index) => {
|
||||||
|
if (row.id == null) return;
|
||||||
|
if (!Object.prototype.hasOwnProperty.call(idToIndex, row.id)) {
|
||||||
|
idToIndex[row.id] = index;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const roots = [];
|
||||||
|
activeRows.forEach((row, index) => {
|
||||||
|
const node = nodes[index];
|
||||||
|
if (
|
||||||
|
row.parentId != null &&
|
||||||
|
Object.prototype.hasOwnProperty.call(idToIndex, row.parentId)
|
||||||
|
) {
|
||||||
|
const parentNode = nodes[idToIndex[row.parentId]];
|
||||||
|
parentNode.children.push(node);
|
||||||
|
} else {
|
||||||
|
roots.push(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
nodes: roots,
|
||||||
|
meta: {
|
||||||
|
updated_at: new Date().toISOString()
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDbIdByName = async (name) => {
|
||||||
|
if (!name) return 0;
|
||||||
|
const key = String(name).trim();
|
||||||
|
if (nameIdCache[key]) return nameIdCache[key];
|
||||||
|
try {
|
||||||
|
const res = await api.getFstByName(key);
|
||||||
|
let id = 0;
|
||||||
|
if (res && typeof res.id !== 'undefined') id = res.id;
|
||||||
|
else if (res && res.data && typeof res.data.id !== 'undefined')
|
||||||
|
id = res.data.id;
|
||||||
|
else if (Array.isArray(res) && res[0] && typeof res[0].id !== 'undefined')
|
||||||
|
id = res[0].id;
|
||||||
|
if (!id) {
|
||||||
|
const list = await api.getFstAllNodes();
|
||||||
|
const arr = Array.isArray(list)
|
||||||
|
? list
|
||||||
|
: list && list.data && Array.isArray(list.data)
|
||||||
|
? list.data
|
||||||
|
: [];
|
||||||
|
const found = arr.find((item) => {
|
||||||
|
const n = String(
|
||||||
|
item.name || item.stsName || item.label || item.id || ''
|
||||||
|
).trim();
|
||||||
|
return n === key;
|
||||||
|
});
|
||||||
|
if (found) {
|
||||||
|
id =
|
||||||
|
Number(
|
||||||
|
found.id ||
|
||||||
|
found.pk ||
|
||||||
|
found.node_id ||
|
||||||
|
found.feature_id ||
|
||||||
|
found.fst_id ||
|
||||||
|
0
|
||||||
|
) || 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
nameIdCache[key] = id || 0;
|
||||||
|
return nameIdCache[key];
|
||||||
|
} catch (e) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const useFstTree = ({
|
||||||
|
getCurrentVersion,
|
||||||
|
ensureEditingVersion,
|
||||||
|
setEditingVersion,
|
||||||
|
onEditVersionInvalid
|
||||||
|
}) => {
|
||||||
|
const [rows, setRows] = useState([]);
|
||||||
|
const [expandedIds, setExpandedIds] = useState([]);
|
||||||
|
const [isChildModalOpen, setIsChildModalOpen] = useState(false);
|
||||||
|
const [childParentId, setChildParentId] = useState(null);
|
||||||
|
const [childForm, setChildForm] = useState({
|
||||||
|
name: '',
|
||||||
|
desc: '',
|
||||||
|
scene: '',
|
||||||
|
taggroup: ''
|
||||||
|
});
|
||||||
|
const [isRootModalOpen, setIsRootModalOpen] = useState(false);
|
||||||
|
const [rootForm, setRootForm] = useState({
|
||||||
|
name: '',
|
||||||
|
desc: '',
|
||||||
|
scene: '',
|
||||||
|
taggroup: ''
|
||||||
|
});
|
||||||
|
const [editingId, setEditingId] = useState(null);
|
||||||
|
const [editForm, setEditForm] = useState({
|
||||||
|
stsName: '',
|
||||||
|
level: '',
|
||||||
|
scene: 'L2',
|
||||||
|
taggroup: ''
|
||||||
|
});
|
||||||
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
||||||
|
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
|
||||||
|
const [deleteTargetId, setDeleteTargetId] = useState(null);
|
||||||
|
const hasInitializedRef = useRef(false);
|
||||||
|
|
||||||
|
const validateChildParentOnConfirm = async (parentRow) => {
|
||||||
|
if (!parentRow || parentRow.deleted === 1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const parentDbId = Number(parentRow.dbId || 0);
|
||||||
|
if (!parentDbId) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const list = await api.getFstAllNodes();
|
||||||
|
const arr = Array.isArray(list)
|
||||||
|
? list
|
||||||
|
: list && list.data && Array.isArray(list.data)
|
||||||
|
? list.data
|
||||||
|
: [];
|
||||||
|
const remoteNode = arr.find((item) => {
|
||||||
|
const id =
|
||||||
|
Number(
|
||||||
|
item.id ||
|
||||||
|
item.pk ||
|
||||||
|
item.node_id ||
|
||||||
|
item.feature_id ||
|
||||||
|
item.fst_id ||
|
||||||
|
0
|
||||||
|
) || 0;
|
||||||
|
return id === parentDbId;
|
||||||
|
});
|
||||||
|
if (!remoteNode) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const remoteDeleted =
|
||||||
|
typeof remoteNode.deleted === 'number'
|
||||||
|
? remoteNode.deleted
|
||||||
|
: Number(remoteNode.deleted) || 0;
|
||||||
|
if (remoteDeleted === 1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const remoteName = String(
|
||||||
|
remoteNode.name || remoteNode.stsName || remoteNode.label || ''
|
||||||
|
).trim();
|
||||||
|
const localName = String(parentRow.stsName || '').trim();
|
||||||
|
if (remoteName && localName && remoteName !== localName) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const validateEditingRowOnConfirm = async (editingRow) => {
|
||||||
|
if (!editingRow || editingRow.deleted === 1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const rowDbId = Number(editingRow.dbId || 0);
|
||||||
|
if (!rowDbId) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
const list = await api.getFstAllNodes();
|
||||||
|
const arr = Array.isArray(list)
|
||||||
|
? list
|
||||||
|
: list && list.data && Array.isArray(list.data)
|
||||||
|
? list.data
|
||||||
|
: [];
|
||||||
|
const remoteNode = arr.find((item) => {
|
||||||
|
const id =
|
||||||
|
Number(
|
||||||
|
item.id ||
|
||||||
|
item.pk ||
|
||||||
|
item.node_id ||
|
||||||
|
item.feature_id ||
|
||||||
|
item.fst_id ||
|
||||||
|
0
|
||||||
|
) || 0;
|
||||||
|
return id === rowDbId;
|
||||||
|
});
|
||||||
|
if (!remoteNode) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const remoteDeleted =
|
||||||
|
typeof remoteNode.deleted === 'number'
|
||||||
|
? remoteNode.deleted
|
||||||
|
: Number(remoteNode.deleted) || 0;
|
||||||
|
return remoteDeleted !== 1;
|
||||||
|
} catch (e) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (id) => {
|
||||||
|
const item = rows.find((row) => row.id === id);
|
||||||
|
if (!item) return;
|
||||||
|
setEditingId(id);
|
||||||
|
setEditForm({
|
||||||
|
stsName: item.stsName,
|
||||||
|
level: item.level,
|
||||||
|
scene: typeof item.scene === 'string' ? item.scene : 'L2',
|
||||||
|
taggroup: typeof item.taggroup === 'string' ? item.taggroup : ''
|
||||||
|
});
|
||||||
|
setIsEditModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditChange = (field, value) => {
|
||||||
|
setEditForm((prev) => ({ ...prev, [field]: value }));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditCancel = () => {
|
||||||
|
setIsEditModalOpen(false);
|
||||||
|
setEditingId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEditSave = async () => {
|
||||||
|
if (!editingId) {
|
||||||
|
setIsEditModalOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const now = formatDateTime();
|
||||||
|
const currentRow = rows.find((row) => row.id === editingId);
|
||||||
|
const rowValid = await validateEditingRowOnConfirm(currentRow);
|
||||||
|
if (!rowValid) {
|
||||||
|
window.alert('该标签已被其他人删除或不存在，请刷新页面后重试。');
|
||||||
|
setIsEditModalOpen(false);
|
||||||
|
setEditingId(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const newName =
|
||||||
|
(editForm.stsName || '').trim() ||
|
||||||
|
(currentRow ? currentRow.stsName : '');
|
||||||
|
const newRows = rows.map((row) => {
|
||||||
|
if (row.id !== editingId) {
|
||||||
|
return row;
|
||||||
|
}
|
||||||
|
let nextScene;
|
||||||
|
if (typeof editForm.scene === 'string') {
|
||||||
|
nextScene = editForm.scene;
|
||||||
|
} else if (typeof row.scene === 'string') {
|
||||||
|
nextScene = row.scene;
|
||||||
|
} else {
|
||||||
|
nextScene = 'L2';
|
||||||
|
}
|
||||||
|
let nextTagGroup;
|
||||||
|
if (typeof editForm.taggroup === 'string') {
|
||||||
|
nextTagGroup = editForm.taggroup;
|
||||||
|
} else if (typeof row.taggroup === 'string') {
|
||||||
|
nextTagGroup = row.taggroup;
|
||||||
|
} else {
|
||||||
|
nextTagGroup = '';
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
...row,
|
||||||
|
stsName: newName,
|
||||||
|
level: editForm.level,
|
||||||
|
scene: nextScene,
|
||||||
|
taggroup: nextTagGroup,
|
||||||
|
updateTime: now
|
||||||
|
};
|
||||||
|
});
|
||||||
|
setRows(newRows);
|
||||||
|
setIsEditModalOpen(false);
|
||||||
|
setEditingId(null);
|
||||||
|
try {
|
||||||
|
const versionName = await ensureEditingVersion();
|
||||||
|
if (!versionName) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const stashContent = buildStashContentFromRows(newRows);
|
||||||
|
await api.upsertFstStash({
|
||||||
|
version: versionName,
|
||||||
|
content: stashContent
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
const status =
|
||||||
|
(error && error.response && error.response.status) || 0;
|
||||||
|
if (status === 400 || status === 404) {
|
||||||
|
if (onEditVersionInvalid) {
|
||||||
|
onEditVersionInvalid();
|
||||||
|
} else {
|
||||||
|
window.alert(
|
||||||
|
'当前编辑版本已被其他人发布或删除，请刷新页面后重新编辑。'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
window.alert('保存标签失败，请稍后重试');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = (id) => {
|
||||||
|
setDeleteTargetId(id);
|
||||||
|
setIsDeleteModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteConfirm = async () => {
|
||||||
|
if (!deleteTargetId) {
|
||||||
|
setIsDeleteModalOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const idsToDelete = [];
|
||||||
|
const stack = [deleteTargetId];
|
||||||
|
while (stack.length > 0) {
|
||||||
|
const current = stack.pop();
|
||||||
|
idsToDelete.push(current);
|
||||||
|
rows.forEach((row) => {
|
||||||
|
if (row.parentId === current) {
|
||||||
|
stack.push(row.id);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const newRows = rows.map((row) =>
|
||||||
|
idsToDelete.includes(row.id) ? { ...row, deleted: 1 } : row
|
||||||
|
);
|
||||||
|
setRows(newRows);
|
||||||
|
setIsDeleteModalOpen(false);
|
||||||
|
setDeleteTargetId(null);
|
||||||
|
try {
|
||||||
|
const versionName = await ensureEditingVersion();
|
||||||
|
if (!versionName) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const stashContent = buildStashContentFromRows(newRows);
|
||||||
|
await api.upsertFstStash({
|
||||||
|
version: versionName,
|
||||||
|
content: stashContent
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
const status =
|
||||||
|
(error && error.response && error.response.status) || 0;
|
||||||
|
if (status === 400 || status === 404) {
|
||||||
|
window.alert(
|
||||||
|
'当前编辑版本已被其他人发布或删除，请刷新页面后重新编辑。'
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
window.alert('删除标签失败，请稍后重试');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteCancel = () => {
|
||||||
|
setIsDeleteModalOpen(false);
|
||||||
|
setDeleteTargetId(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateNew = () => {
|
||||||
|
setRootForm({ name: '', desc: '', scene: '', taggroup: '' });
|
||||||
|
setIsRootModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAddChild = (parentId) => {
|
||||||
|
setChildParentId(parentId);
|
||||||
|
setChildForm({
|
||||||
|
name: '',
|
||||||
|
desc: '',
|
||||||
|
scene: '',
|
||||||
|
taggroup: ''
|
||||||
|
});
|
||||||
|
setIsChildModalOpen(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRootConfirm = async () => {
|
||||||
|
if (!rootForm.name || !rootForm.name.trim()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const now = formatDateTime();
|
||||||
|
const name = rootForm.name.trim();
|
||||||
|
const desc = rootForm.desc || '';
|
||||||
|
const scene =
|
||||||
|
typeof rootForm.scene === 'string' ? rootForm.scene : '';
|
||||||
|
const taggroup =
|
||||||
|
typeof rootForm.taggroup === 'string' ? rootForm.taggroup : '';
|
||||||
|
const nextId = (rows[rows.length - 1]?.id || 0) + 1;
|
||||||
|
const newRow = {
|
||||||
|
id: nextId,
|
||||||
|
stsName: name,
|
||||||
|
level: desc,
|
||||||
|
scene,
|
||||||
|
taggroup,
|
||||||
|
createtime: now,
|
||||||
|
updateTime: now,
|
||||||
|
parentId: null,
|
||||||
|
deleted: 0,
|
||||||
|
treeLevel: 1
|
||||||
|
};
|
||||||
|
const newRows = [...rows, newRow];
|
||||||
|
setRows(newRows);
|
||||||
|
setIsRootModalOpen(false);
|
||||||
|
setRootForm({ name: '', desc: '', scene: '', taggroup: '' });
|
||||||
|
|
||||||
|
try {
|
||||||
|
const versionName = await ensureEditingVersion();
|
||||||
|
if (!versionName) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const stashContent = buildStashContentFromRows(newRows);
|
||||||
|
await api.upsertFstStash({
|
||||||
|
version: versionName,
|
||||||
|
content: stashContent
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
const status =
|
||||||
|
(error && error.response && error.response.status) || 0;
|
||||||
|
if (status === 400 || status === 404) {
|
||||||
|
window.alert(
|
||||||
|
'当前编辑版本已被其他人发布或删除，请刷新页面后重新编辑。'
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
window.alert('新建一级标签失败，请稍后重试');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRootCancel = () => {
|
||||||
|
setIsRootModalOpen(false);
|
||||||
|
setRootForm({ name: '', desc: '', scene: '', taggroup: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChildConfirm = async () => {
|
||||||
|
if (!childParentId) {
|
||||||
|
setIsChildModalOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const parent = rows.find((row) => row.id === childParentId);
|
||||||
|
const parentValid = await validateChildParentOnConfirm(parent);
|
||||||
|
if (!parentValid) {
|
||||||
|
window.alert('父标签不存在或已被其他人修改，请刷新页面后重试。');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const now = formatDateTime();
|
||||||
|
const nextId = (rows[rows.length - 1]?.id || 0) + 1;
|
||||||
|
const treeLevel =
|
||||||
|
parent && typeof parent.treeLevel === 'number'
|
||||||
|
? parent.treeLevel + 1
|
||||||
|
: 1;
|
||||||
|
const name =
|
||||||
|
childForm.name && childForm.name.trim().length > 0
|
||||||
|
? childForm.name.trim()
|
||||||
|
: `NEW-${nextId}`;
|
||||||
|
const desc = childForm.desc || '';
|
||||||
|
const scene = childForm.scene || '';
|
||||||
|
const taggroup = childForm.taggroup || '';
|
||||||
|
const newItem = {
|
||||||
|
id: nextId,
|
||||||
|
stsName: name,
|
||||||
|
level: desc,
|
||||||
|
scene,
|
||||||
|
taggroup,
|
||||||
|
createtime: now,
|
||||||
|
updateTime: now,
|
||||||
|
parentId: childParentId,
|
||||||
|
deleted: 0,
|
||||||
|
treeLevel
|
||||||
|
};
|
||||||
|
const newRows = (() => {
|
||||||
|
const next = [...rows];
|
||||||
|
const parentIdx = next.findIndex((row) => row.id === childParentId);
|
||||||
|
let insertPos = parentIdx + 1;
|
||||||
|
while (
|
||||||
|
insertPos < next.length &&
|
||||||
|
next[insertPos].parentId === childParentId
|
||||||
|
) {
|
||||||
|
insertPos += 1;
|
||||||
|
}
|
||||||
|
next.splice(insertPos, 0, newItem);
|
||||||
|
return next;
|
||||||
|
})();
|
||||||
|
setRows(newRows);
|
||||||
|
try {
|
||||||
|
const versionName = await ensureEditingVersion();
|
||||||
|
if (versionName) {
|
||||||
|
const stashContent = buildStashContentFromRows(newRows);
|
||||||
|
await api.upsertFstStash({
|
||||||
|
version: versionName,
|
||||||
|
content: stashContent
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
const status =
|
||||||
|
(error && error.response && error.response.status) || 0;
|
||||||
|
if (status === 400 || status === 404) {
|
||||||
|
if (onEditVersionInvalid) {
|
||||||
|
onEditVersionInvalid();
|
||||||
|
} else {
|
||||||
|
window.alert(
|
||||||
|
'当前编辑版本已被其他人发布或删除，请刷新页面后重新编辑。'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
window.alert('新建下级标签失败，请稍后重试');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setExpandedIds((prev) =>
|
||||||
|
prev.includes(childParentId) ? prev : [...prev, childParentId]
|
||||||
|
);
|
||||||
|
setIsChildModalOpen(false);
|
||||||
|
setChildParentId(null);
|
||||||
|
setChildForm({ name: '', desc: '', scene: '', taggroup: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChildCancel = () => {
|
||||||
|
setIsChildModalOpen(false);
|
||||||
|
setChildParentId(null);
|
||||||
|
setChildForm({ name: '', desc: '', scene: '', taggroup: '' });
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleExpand = (id) => {
|
||||||
|
setExpandedIds((prev) =>
|
||||||
|
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Only run initial data load once; avoid reloading stale remote data
|
||||||
|
// after local edits due to function identity changes from parent hooks.
|
||||||
|
if (hasInitializedRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
hasInitializedRef.current = true;
|
||||||
|
|
||||||
|
const load = async () => {
|
||||||
|
try {
|
||||||
|
let versionName = '';
|
||||||
|
let raw;
|
||||||
|
let edit = '';
|
||||||
|
try {
|
||||||
|
const storedEdit = window.localStorage.getItem('fst_edit_version');
|
||||||
|
if (storedEdit && storedEdit.trim()) {
|
||||||
|
edit = storedEdit.trim();
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
if (edit) {
|
||||||
|
try {
|
||||||
|
raw = await api.getFstStash(edit);
|
||||||
|
versionName = edit;
|
||||||
|
if (setEditingVersion) {
|
||||||
|
setEditingVersion(edit);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
try {
|
||||||
|
window.localStorage.removeItem('fst_edit_version');
|
||||||
|
} catch (e2) {}
|
||||||
|
edit = '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!versionName) {
|
||||||
|
try {
|
||||||
|
const versionsRes = await api.getVersions();
|
||||||
|
const list = Array.isArray(versionsRes)
|
||||||
|
? versionsRes
|
||||||
|
: (versionsRes &&
|
||||||
|
versionsRes.data &&
|
||||||
|
Array.isArray(versionsRes.data)
|
||||||
|
? versionsRes.data
|
||||||
|
: []);
|
||||||
|
const isEditVersion = (name) =>
|
||||||
|
typeof name === 'string' && /_editing_temp$/.test(name.trim());
|
||||||
|
const editItem = list.find((v) => {
|
||||||
|
const n = v.version || v.versionName || '';
|
||||||
|
return isEditVersion(n);
|
||||||
|
});
|
||||||
|
if (editItem) {
|
||||||
|
const name =
|
||||||
|
editItem.version || editItem.versionName || editItem.id || '';
|
||||||
|
if (name) {
|
||||||
|
try {
|
||||||
|
raw = await api.getFstStash(name);
|
||||||
|
versionName = name;
|
||||||
|
if (setEditingVersion) {
|
||||||
|
setEditingVersion(name);
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem('fst_edit_version', name);
|
||||||
|
} catch (e) {}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
if (!versionName) {
|
||||||
|
const base = await getCurrentVersion();
|
||||||
|
versionName = base;
|
||||||
|
if (versionName) {
|
||||||
|
try {
|
||||||
|
raw = await api.getFstStash(versionName);
|
||||||
|
} catch (e) {
|
||||||
|
raw = await api.getFstPrintTree();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
raw = await api.getFstPrintTree();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
let nodes = raw;
|
||||||
|
if (!Array.isArray(nodes) && raw && Array.isArray(raw.data)) {
|
||||||
|
nodes = raw.data;
|
||||||
|
}
|
||||||
|
if (!Array.isArray(nodes) && raw && Array.isArray(raw.nodes)) {
|
||||||
|
nodes = raw.nodes;
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
!Array.isArray(nodes) &&
|
||||||
|
raw &&
|
||||||
|
raw.content &&
|
||||||
|
Array.isArray(raw.content.nodes)
|
||||||
|
) {
|
||||||
|
nodes = raw.content.nodes;
|
||||||
|
}
|
||||||
|
if (!Array.isArray(nodes)) {
|
||||||
|
console.error('print_tree 返回内容异常', raw);
|
||||||
|
window.alert('接口返回数据格式不正确');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const now = formatDateTime();
|
||||||
|
const list = [];
|
||||||
|
const traverse = (items, parentRowId = null, parentLevel = 0) => {
|
||||||
|
items.forEach((node) => {
|
||||||
|
const name =
|
||||||
|
node.name || node.label || String(node.id || '');
|
||||||
|
const description =
|
||||||
|
node.Description ||
|
||||||
|
(node.reserved_json &&
|
||||||
|
(node.reserved_json.desc ||
|
||||||
|
node.reserved_json.description)) ||
|
||||||
|
node.label ||
|
||||||
|
'';
|
||||||
|
const deleted =
|
||||||
|
typeof node.deleted === 'number'
|
||||||
|
? node.deleted
|
||||||
|
: Number(node.deleted) || 0;
|
||||||
|
if (name === ROOT_NAME) {
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
traverse(node.children, parentRowId, parentLevel);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (deleted === 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const createTime =
|
||||||
|
node.createtime ||
|
||||||
|
node.create_time ||
|
||||||
|
node.created_time ||
|
||||||
|
node.createTime ||
|
||||||
|
now;
|
||||||
|
const updateTime =
|
||||||
|
node.updateTime ||
|
||||||
|
node.updated_time ||
|
||||||
|
node.update_time ||
|
||||||
|
node.updateTime ||
|
||||||
|
createTime ||
|
||||||
|
now;
|
||||||
|
const rowId = list.length + 1;
|
||||||
|
const treeLevel = parentLevel + 1;
|
||||||
|
const dbId =
|
||||||
|
Number(
|
||||||
|
node.id ||
|
||||||
|
node.pk ||
|
||||||
|
node.node_id ||
|
||||||
|
node.feature_id ||
|
||||||
|
node.fst_id ||
|
||||||
|
0
|
||||||
|
) || 0;
|
||||||
|
let scene = '';
|
||||||
|
if (typeof node.scene === 'string') {
|
||||||
|
scene = node.scene.trim();
|
||||||
|
} else if (
|
||||||
|
node.scene == null ||
|
||||||
|
(typeof node.scene === 'number' && Number.isNaN(node.scene))
|
||||||
|
) {
|
||||||
|
scene = 'L2';
|
||||||
|
}
|
||||||
|
let taggroup = '';
|
||||||
|
if (typeof node.taggroup === 'string') {
|
||||||
|
taggroup = node.taggroup.trim();
|
||||||
|
} else if (typeof node.tagGroup === 'string') {
|
||||||
|
taggroup = node.tagGroup.trim();
|
||||||
|
}
|
||||||
|
list.push({
|
||||||
|
id: rowId,
|
||||||
|
stsName: name,
|
||||||
|
level: description,
|
||||||
|
createtime: createTime,
|
||||||
|
updateTime,
|
||||||
|
parentId: parentRowId,
|
||||||
|
deleted,
|
||||||
|
treeLevel,
|
||||||
|
dbId,
|
||||||
|
scene,
|
||||||
|
taggroup
|
||||||
|
});
|
||||||
|
if (node.children && node.children.length > 0) {
|
||||||
|
traverse(node.children, rowId, treeLevel);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
traverse(nodes, null, 0);
|
||||||
|
setRows(list);
|
||||||
|
setExpandedIds(list.map((row) => row.id));
|
||||||
|
setEditingId(null);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('从接口加载数据失败', error);
|
||||||
|
window.alert(
|
||||||
|
`从接口加载数据失败: ${error.message || '请检查网络或后端服务'}`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
load();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
rows,
|
||||||
|
expandedIds,
|
||||||
|
isChildModalOpen,
|
||||||
|
childParentId,
|
||||||
|
childForm,
|
||||||
|
setChildForm,
|
||||||
|
isRootModalOpen,
|
||||||
|
rootForm,
|
||||||
|
setRootForm,
|
||||||
|
editingId,
|
||||||
|
editForm,
|
||||||
|
isEditModalOpen,
|
||||||
|
isDeleteModalOpen,
|
||||||
|
deleteTargetId,
|
||||||
|
handleEdit,
|
||||||
|
handleEditChange,
|
||||||
|
handleEditCancel,
|
||||||
|
handleEditSave,
|
||||||
|
handleDelete,
|
||||||
|
handleDeleteConfirm,
|
||||||
|
handleDeleteCancel,
|
||||||
|
handleCreateNew,
|
||||||
|
handleAddChild,
|
||||||
|
handleRootConfirm,
|
||||||
|
handleRootCancel,
|
||||||
|
handleChildConfirm,
|
||||||
|
handleChildCancel,
|
||||||
|
toggleExpand,
|
||||||
|
setRows,
|
||||||
|
setExpandedIds,
|
||||||
|
setEditingId
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useFstTree;
|
||||||
159
src/hooks/useFstVersion.js
Normal file
159
src/hooks/useFstVersion.js
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import { useState, useCallback } from 'react';
|
||||||
|
import api from '../services/api';
|
||||||
|
|
||||||
|
const useFstVersion = () => {
|
||||||
|
const [currentVersion, setCurrentVersion] = useState('');
|
||||||
|
const [editingVersion, setEditingVersion] = useState('');
|
||||||
|
const [noVersionTip, setNoVersionTip] = useState(false);
|
||||||
|
|
||||||
|
const formatDateTime = () => {
|
||||||
|
const date = new Date();
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getCurrentVersion = useCallback(async () => {
|
||||||
|
if (currentVersion) {
|
||||||
|
return currentVersion;
|
||||||
|
}
|
||||||
|
let storedName = '';
|
||||||
|
try {
|
||||||
|
storedName = window.localStorage.getItem('fst_current_version') || '';
|
||||||
|
} catch (e) {}
|
||||||
|
let versionName = '';
|
||||||
|
try {
|
||||||
|
const versionsRes = await api.getVersions();
|
||||||
|
const list = Array.isArray(versionsRes)
|
||||||
|
? versionsRes
|
||||||
|
: versionsRes && versionsRes.data && Array.isArray(versionsRes.data)
|
||||||
|
? versionsRes.data
|
||||||
|
: [];
|
||||||
|
const isEditVersion = (name) =>
|
||||||
|
typeof name === 'string' && /_editing_temp$/.test(name.trim());
|
||||||
|
const normalList = list.filter((v) => {
|
||||||
|
const n = v.version || v.versionName || '';
|
||||||
|
return !isEditVersion(n);
|
||||||
|
});
|
||||||
|
if (!normalList.length) {
|
||||||
|
setNoVersionTip(true);
|
||||||
|
try {
|
||||||
|
window.localStorage.removeItem('fst_current_version');
|
||||||
|
window.localStorage.removeItem('fst_edit_version');
|
||||||
|
window.localStorage.removeItem('fst_edit_version_id');
|
||||||
|
} catch (e) {}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const sorted = [...normalList].sort((a, b) => {
|
||||||
|
const ta = new Date(
|
||||||
|
a.update_time ||
|
||||||
|
a.updateTime ||
|
||||||
|
a.created_time ||
|
||||||
|
a.create_time ||
|
||||||
|
0
|
||||||
|
).getTime();
|
||||||
|
const tb = new Date(
|
||||||
|
b.update_time ||
|
||||||
|
b.updateTime ||
|
||||||
|
b.created_time ||
|
||||||
|
b.create_time ||
|
||||||
|
0
|
||||||
|
).getTime();
|
||||||
|
return tb - ta;
|
||||||
|
});
|
||||||
|
const first = sorted[0];
|
||||||
|
versionName = first.version || first.versionName || '';
|
||||||
|
} catch (e) {}
|
||||||
|
if (versionName) {
|
||||||
|
setCurrentVersion(versionName);
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem('fst_current_version', versionName);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
return versionName;
|
||||||
|
}, [currentVersion]);
|
||||||
|
|
||||||
|
const ensureEditingVersion = useCallback(async () => {
|
||||||
|
const isEditVersion = (name) =>
|
||||||
|
typeof name === 'string' && /_editing_temp$/.test(name.trim());
|
||||||
|
let base = (await getCurrentVersion()) || 'fst';
|
||||||
|
if (isEditVersion(base)) {
|
||||||
|
base = base.replace(/_editing_temp$/i, '') || 'fst';
|
||||||
|
}
|
||||||
|
const targetName = `${base}_editing_temp`;
|
||||||
|
if (editingVersion && editingVersion.trim() === targetName) {
|
||||||
|
return targetName;
|
||||||
|
}
|
||||||
|
let stored = '';
|
||||||
|
try {
|
||||||
|
stored = window.localStorage.getItem('fst_edit_version') || '';
|
||||||
|
} catch (e) {}
|
||||||
|
if (stored && stored.trim() && stored.trim() === targetName) {
|
||||||
|
const v = stored.trim();
|
||||||
|
setEditingVersion(v);
|
||||||
|
return v;
|
||||||
|
}
|
||||||
|
let targetItem = null;
|
||||||
|
try {
|
||||||
|
const versionsRes = await api.getVersions();
|
||||||
|
const list = Array.isArray(versionsRes)
|
||||||
|
? versionsRes
|
||||||
|
: versionsRes && versionsRes.data && Array.isArray(versionsRes.data)
|
||||||
|
? versionsRes.data
|
||||||
|
: [];
|
||||||
|
const editItems = list.filter((v) => {
|
||||||
|
const n = v.version || v.versionName || '';
|
||||||
|
return isEditVersion(n);
|
||||||
|
});
|
||||||
|
targetItem = editItems.find((v) => {
|
||||||
|
const n = v.version || v.versionName || '';
|
||||||
|
return n === targetName;
|
||||||
|
});
|
||||||
|
const toDelete = editItems.filter((v) => v !== targetItem);
|
||||||
|
for (const item of toDelete) {
|
||||||
|
if (typeof item.id === 'undefined') {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await api.deleteVersion(item.id);
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
} catch (e) {}
|
||||||
|
if (!targetItem) {
|
||||||
|
const now = formatDateTime();
|
||||||
|
try {
|
||||||
|
await api.createVersion({
|
||||||
|
version: targetName,
|
||||||
|
description: `临时编辑版本，基于 ${base || '无'}`,
|
||||||
|
type: 'production',
|
||||||
|
release_date: now,
|
||||||
|
created_time: now,
|
||||||
|
update_time: now,
|
||||||
|
status: '未生效'
|
||||||
|
});
|
||||||
|
} catch (e) {}
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
window.localStorage.setItem('fst_edit_version', targetName);
|
||||||
|
} catch (e) {}
|
||||||
|
setEditingVersion(targetName);
|
||||||
|
return targetName;
|
||||||
|
}, [editingVersion, getCurrentVersion]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
currentVersion,
|
||||||
|
editingVersion,
|
||||||
|
noVersionTip,
|
||||||
|
getCurrentVersion,
|
||||||
|
ensureEditingVersion,
|
||||||
|
setCurrentVersion,
|
||||||
|
setEditingVersion,
|
||||||
|
setNoVersionTip
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useFstVersion;
|
||||||
173
src/hooks/useVersionList.js
Normal file
173
src/hooks/useVersionList.js
Normal file
@@ -0,0 +1,173 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
import api from '../services/api';
|
||||||
|
|
||||||
|
const useVersionList = (isActive) => {
|
||||||
|
const [versions, setVersions] = useState([]);
|
||||||
|
|
||||||
|
const normalizeFeishuSyncStatus = (item) => {
|
||||||
|
const raw =
|
||||||
|
item.feishu_sync_status ??
|
||||||
|
item.feishuSyncStatus ??
|
||||||
|
item.feishu_sync ??
|
||||||
|
item.feishuSync;
|
||||||
|
|
||||||
|
if (typeof raw === 'boolean') {
|
||||||
|
return raw ? 'synced' : 'unsynced';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof raw === 'number') {
|
||||||
|
if (raw === 1) return 'synced';
|
||||||
|
if (raw === 0) return 'unsynced';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof item.is_feishu_synced === 'boolean') {
|
||||||
|
return item.is_feishu_synced ? 'synced' : 'unsynced';
|
||||||
|
}
|
||||||
|
|
||||||
|
const normalized = String(raw || '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
if (!normalized) return 'unknown';
|
||||||
|
if (
|
||||||
|
normalized === 'synced' ||
|
||||||
|
normalized === 'success' ||
|
||||||
|
normalized === 'done' ||
|
||||||
|
normalized === '1' ||
|
||||||
|
normalized === '已同步'
|
||||||
|
) {
|
||||||
|
return 'synced';
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
normalized === 'unsynced' ||
|
||||||
|
normalized === 'pending' ||
|
||||||
|
normalized === '0' ||
|
||||||
|
normalized === '未同步'
|
||||||
|
) {
|
||||||
|
return 'unsynced';
|
||||||
|
}
|
||||||
|
return normalized;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFeishuSyncLabel = (status) => {
|
||||||
|
if (status === 'synced') return '已同步';
|
||||||
|
if (status === 'unsynced') return '未同步';
|
||||||
|
if (status === 'unknown') return '-';
|
||||||
|
return status || '-';
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeVersionStatus = (value) => {
|
||||||
|
const normalized = String(value || '')
|
||||||
|
.trim()
|
||||||
|
.toLowerCase();
|
||||||
|
if (!normalized) return '';
|
||||||
|
if (normalized === 'active' || normalized === '已生效') {
|
||||||
|
return '已生效';
|
||||||
|
}
|
||||||
|
if (
|
||||||
|
normalized === 'inactive' ||
|
||||||
|
normalized === 'in-active' ||
|
||||||
|
normalized === '未生效'
|
||||||
|
) {
|
||||||
|
return '未生效';
|
||||||
|
}
|
||||||
|
return String(value || '');
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatDateTime = (value) => {
|
||||||
|
if (!value) return '';
|
||||||
|
const date = new Date(value);
|
||||||
|
if (Number.isNaN(date.getTime())) return String(value);
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||||
|
const day = String(date.getDate()).padStart(2, '0');
|
||||||
|
const hours = String(date.getHours()).padStart(2, '0');
|
||||||
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||||
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||||
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const normalizeVersions = (rawList) => {
|
||||||
|
const normalizedList = (rawList || [])
|
||||||
|
.map((item) => {
|
||||||
|
const feishuSyncStatus = normalizeFeishuSyncStatus(item);
|
||||||
|
return {
|
||||||
|
feishuSyncStatus,
|
||||||
|
feishuSyncLabel: getFeishuSyncLabel(feishuSyncStatus),
|
||||||
|
id: item.id,
|
||||||
|
versionName: item.version || item.versionName || '',
|
||||||
|
create_time: formatDateTime(
|
||||||
|
item.created_time || item.release_date || item.create_time || ''
|
||||||
|
),
|
||||||
|
update_time: formatDateTime(item.update_time || item.updateTime || ''),
|
||||||
|
status: normalizeVersionStatus(
|
||||||
|
item.status != null ? item.status : item.type || ''
|
||||||
|
)
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.filter((item) => {
|
||||||
|
const name = item.versionName || '';
|
||||||
|
return (
|
||||||
|
name &&
|
||||||
|
!name.includes('_editing_') &&
|
||||||
|
!name.endsWith('_editing_temp')
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const activeItems = normalizedList.filter(
|
||||||
|
(item) => item.status === '已生效'
|
||||||
|
);
|
||||||
|
if (activeItems.length <= 1) {
|
||||||
|
return normalizedList;
|
||||||
|
}
|
||||||
|
|
||||||
|
const keepActiveId = activeItems[0] ? activeItems[0].id : null;
|
||||||
|
return normalizedList.map((item) => {
|
||||||
|
if (item.status === '已生效' && item.id !== keepActiveId) {
|
||||||
|
return { ...item, status: '未生效' };
|
||||||
|
}
|
||||||
|
return item;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchVersions = useCallback(async () => {
|
||||||
|
try {
|
||||||
|
const res = await api.getVersions();
|
||||||
|
const list = Array.isArray(res)
|
||||||
|
? res
|
||||||
|
: (res && res.data && Array.isArray(res.data) ? res.data : []);
|
||||||
|
const normalized = normalizeVersions(list);
|
||||||
|
setVersions(normalized);
|
||||||
|
return normalized;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('获取版本列表失败', error);
|
||||||
|
setVersions([]);
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
fetchVersions();
|
||||||
|
}, [fetchVersions]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isActive) {
|
||||||
|
fetchVersions();
|
||||||
|
}
|
||||||
|
}, [isActive, fetchVersions]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = () => {
|
||||||
|
if (isActive) {
|
||||||
|
fetchVersions();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('fst:release_success', handler);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('fst:release_success', handler);
|
||||||
|
};
|
||||||
|
}, [isActive, fetchVersions]);
|
||||||
|
|
||||||
|
return { versions, setVersions, refreshVersions: fetchVersions };
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useVersionList;
|
||||||
13
src/index.js
Normal file
13
src/index.js
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom/client';
|
||||||
|
import App from './App';
|
||||||
|
import './App.css';
|
||||||
|
|
||||||
|
const container = document.getElementById('root');
|
||||||
|
const root = ReactDOM.createRoot(container);
|
||||||
|
|
||||||
|
root.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>
|
||||||
|
);
|
||||||
1704
src/pages/FstTagPage copy.jsx_20260203
Normal file
1704
src/pages/FstTagPage copy.jsx_20260203
Normal file
File diff suppressed because it is too large
Load Diff
395
src/pages/FstTagPage.jsx
Normal file
395
src/pages/FstTagPage.jsx
Normal file
@@ -0,0 +1,395 @@
|
|||||||
|
// React 基础与 Hooks
|
||||||
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
|
|
||||||
|
// 接口封装与业务 Hook
|
||||||
|
import api from '../services/api';
|
||||||
|
import useFstVersion from '../hooks/useFstVersion';
|
||||||
|
import useFstTree from '../hooks/useFstTree';
|
||||||
|
import useFstRelease from '../hooks/useFstRelease';
|
||||||
|
import useFstImport from '../hooks/useFstImport';
|
||||||
|
|
||||||
|
// 页面布局类组件
|
||||||
|
import FstToolbar from '../components/fst/FstToolbar';
|
||||||
|
import FstTable from '../components/fst/FstTable';
|
||||||
|
|
||||||
|
// 各类业务弹窗组件
|
||||||
|
import ReleaseModal from '../components/fst/ReleaseModal';
|
||||||
|
import RootTagModal from '../components/fst/RootTagModal';
|
||||||
|
import ChildTagModal from '../components/fst/ChildTagModal';
|
||||||
|
import EditTagModal from '../components/fst/EditTagModal';
|
||||||
|
import DeleteConfirmModal from '../components/fst/DeleteConfirmModal';
|
||||||
|
import ReleaseDiffPanel from '../components/fst/ReleaseDiffPanel';
|
||||||
|
import InfoModal from '../components/fst/InfoModal';
|
||||||
|
|
||||||
|
const FstTagPage = () => {
|
||||||
|
const [isEditErrorOpen, setIsEditErrorOpen] = useState(false);
|
||||||
|
const [editErrorMessage, setEditErrorMessage] = useState('');
|
||||||
|
const [isReleaseErrorOpen, setIsReleaseErrorOpen] = useState(false);
|
||||||
|
const [releaseErrorMessage, setReleaseErrorMessage] = useState('');
|
||||||
|
const [isImportErrorOpen, setIsImportErrorOpen] = useState(false);
|
||||||
|
const [importErrorMessage, setImportErrorMessage] = useState('');
|
||||||
|
const {
|
||||||
|
currentVersion,
|
||||||
|
editingVersion,
|
||||||
|
noVersionTip,
|
||||||
|
getCurrentVersion,
|
||||||
|
ensureEditingVersion,
|
||||||
|
setCurrentVersion,
|
||||||
|
setEditingVersion
|
||||||
|
} = useFstVersion();
|
||||||
|
const {
|
||||||
|
rows,
|
||||||
|
expandedIds,
|
||||||
|
isChildModalOpen,
|
||||||
|
childParentId,
|
||||||
|
childForm,
|
||||||
|
setChildForm,
|
||||||
|
isRootModalOpen,
|
||||||
|
rootForm,
|
||||||
|
setRootForm,
|
||||||
|
editingId,
|
||||||
|
editForm,
|
||||||
|
isEditModalOpen,
|
||||||
|
isDeleteModalOpen,
|
||||||
|
deleteTargetId,
|
||||||
|
handleEdit,
|
||||||
|
handleEditChange,
|
||||||
|
handleEditCancel,
|
||||||
|
handleEditSave,
|
||||||
|
handleDelete,
|
||||||
|
handleDeleteConfirm,
|
||||||
|
handleDeleteCancel,
|
||||||
|
handleCreateNew,
|
||||||
|
handleAddChild,
|
||||||
|
handleRootConfirm,
|
||||||
|
handleRootCancel,
|
||||||
|
handleChildConfirm,
|
||||||
|
handleChildCancel,
|
||||||
|
toggleExpand,
|
||||||
|
setRows,
|
||||||
|
setExpandedIds,
|
||||||
|
setEditingId
|
||||||
|
} = useFstTree({
|
||||||
|
getCurrentVersion,
|
||||||
|
ensureEditingVersion,
|
||||||
|
setEditingVersion,
|
||||||
|
onEditVersionInvalid: () => {
|
||||||
|
setEditErrorMessage(
|
||||||
|
'刚刚有其他人发布了最新版本，当前编辑版本已失效，本次保存未生效。为避免覆盖他人的修改，请刷新页面后，在最新版本上重新编辑。'
|
||||||
|
);
|
||||||
|
setIsEditErrorOpen(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const {
|
||||||
|
isReleaseModalOpen,
|
||||||
|
isReleaseSyncingOpen,
|
||||||
|
isReleaseSuccessOpen,
|
||||||
|
releaseForm,
|
||||||
|
releaseDiff,
|
||||||
|
releaseDiffExpanded,
|
||||||
|
setReleaseForm,
|
||||||
|
openRelease,
|
||||||
|
closeRelease,
|
||||||
|
closeReleaseSuccess,
|
||||||
|
toggleDiffSection,
|
||||||
|
handleReleaseConfirm
|
||||||
|
} = useFstRelease({
|
||||||
|
rows,
|
||||||
|
getCurrentVersion,
|
||||||
|
ensureEditingVersion,
|
||||||
|
setCurrentVersion,
|
||||||
|
setEditingVersion,
|
||||||
|
onReleaseError: (msg) => {
|
||||||
|
setReleaseErrorMessage(
|
||||||
|
msg ||
|
||||||
|
'发布失败，保存标签或创建版本时出错，请稍后重试或联系管理员。'
|
||||||
|
);
|
||||||
|
setIsReleaseErrorOpen(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const {
|
||||||
|
fileInputRef,
|
||||||
|
isImportSuccessOpen,
|
||||||
|
isImportExampleOpen,
|
||||||
|
handleImportClick,
|
||||||
|
openImportExample,
|
||||||
|
closeImportExample,
|
||||||
|
closeImportSuccess,
|
||||||
|
handleFileChange
|
||||||
|
} = useFstImport({
|
||||||
|
setRows,
|
||||||
|
setExpandedIds,
|
||||||
|
setEditingId,
|
||||||
|
getCurrentVersion,
|
||||||
|
onImportError: (msg) => {
|
||||||
|
setImportErrorMessage(
|
||||||
|
msg || '导入失败，请检查导入文件中的版本号或数据格式。'
|
||||||
|
);
|
||||||
|
setIsImportErrorOpen(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 当前正在新增下级标签时，找到父节点和其层级，用于弹框里展示和计算 treeLevel
|
||||||
|
const parentRow = rows.find((row) => row.id === childParentId);
|
||||||
|
const childLevel =
|
||||||
|
parentRow && typeof parentRow.treeLevel === 'number'
|
||||||
|
? parentRow.treeLevel + 1
|
||||||
|
: 1;
|
||||||
|
|
||||||
|
// 当前正在编辑的行及其层级、父节点信息，用于“修改标签”弹框展示
|
||||||
|
const editingRow = rows.find((row) => row.id === editingId);
|
||||||
|
const editTreeLevel =
|
||||||
|
editingRow && typeof editingRow.treeLevel === 'number'
|
||||||
|
? editingRow.treeLevel
|
||||||
|
: 1;
|
||||||
|
const editParentRow =
|
||||||
|
editingRow && editingRow.parentId
|
||||||
|
? rows.find((row) => row.id === editingRow.parentId)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const handleShowImportExample = () => {
|
||||||
|
openImportExample();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRelease = () => {
|
||||||
|
if (editingId !== null) {
|
||||||
|
window.alert('请先保存正在编辑的标签，再执行发布');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
openRelease();
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const forceReload = () => {
|
||||||
|
window.location.reload();
|
||||||
|
};
|
||||||
|
const handleStorage = (event) => {
|
||||||
|
const key = event && event.key ? event.key : '';
|
||||||
|
if (
|
||||||
|
key === 'fst_current_version' ||
|
||||||
|
key === 'fst_edit_version' ||
|
||||||
|
key === 'fst_data_sync_at'
|
||||||
|
) {
|
||||||
|
forceReload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const checkVersionMismatch = () => {
|
||||||
|
let stored = '';
|
||||||
|
try {
|
||||||
|
stored = window.localStorage.getItem('fst_current_version') || '';
|
||||||
|
} catch (e) {}
|
||||||
|
const localVersion = (currentVersion || '').trim();
|
||||||
|
const storedVersion = stored.trim();
|
||||||
|
if (storedVersion && localVersion && storedVersion !== localVersion) {
|
||||||
|
forceReload();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleVisible = () => {
|
||||||
|
if (document.visibilityState === 'visible') {
|
||||||
|
checkVersionMismatch();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
window.addEventListener('storage', handleStorage);
|
||||||
|
window.addEventListener('focus', checkVersionMismatch);
|
||||||
|
document.addEventListener('visibilitychange', handleVisible);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('storage', handleStorage);
|
||||||
|
window.removeEventListener('focus', checkVersionMismatch);
|
||||||
|
document.removeEventListener('visibilitychange', handleVisible);
|
||||||
|
};
|
||||||
|
}, [currentVersion]);
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
ref={fileInputRef}
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
accept=".json,application/json"
|
||||||
|
onChange={handleFileChange}
|
||||||
|
/>
|
||||||
|
<FstToolbar
|
||||||
|
onCreateNew={handleCreateNew}
|
||||||
|
onImportClick={handleImportClick}
|
||||||
|
onReleaseClick={handleRelease}
|
||||||
|
onShowImportExample={handleShowImportExample}
|
||||||
|
noVersionTip={noVersionTip}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="table-container">
|
||||||
|
<DeleteConfirmModal
|
||||||
|
open={isDeleteModalOpen}
|
||||||
|
title="确认删除"
|
||||||
|
message="删除该标签会一并删除其所有子标签，确认删除吗？"
|
||||||
|
onCancel={handleDeleteCancel}
|
||||||
|
onConfirm={handleDeleteConfirm}
|
||||||
|
/>
|
||||||
|
{isImportExampleOpen && (
|
||||||
|
<InfoModal
|
||||||
|
open={isImportExampleOpen}
|
||||||
|
title="导入 JSON 示例"
|
||||||
|
onClose={closeImportExample}
|
||||||
|
bodyStyle={{
|
||||||
|
maxHeight: '300px',
|
||||||
|
overflow: 'auto'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p>请参考以下示例编写导入文件：</p>
|
||||||
|
<pre
|
||||||
|
style={{
|
||||||
|
backgroundColor: '#f5f5f5',
|
||||||
|
padding: '12px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '12px'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{`{
|
||||||
|
"meta": {
|
||||||
|
"remark": "示例：请根据需要修改版本号、备注、场景（scene）和标签组（taggroup）"
|
||||||
|
},
|
||||||
|
"nodes": [
|
||||||
|
{
|
||||||
|
"name": "Level1-示例标签",
|
||||||
|
"Description": "P1",
|
||||||
|
"scene": "L2",
|
||||||
|
"taggroup": "Driving",
|
||||||
|
"deleted": 0,
|
||||||
|
"children": [
|
||||||
|
{
|
||||||
|
"name": "Level2-示例子标签",
|
||||||
|
"Description": "P2",
|
||||||
|
"scene": "L3",
|
||||||
|
"taggroup": "Parking",
|
||||||
|
"deleted": 0,
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Level2-示例子标签-多场景",
|
||||||
|
"Description": "P2-多场景",
|
||||||
|
"scene": "L2,L3",
|
||||||
|
"taggroup": "Parking,Driving",
|
||||||
|
"deleted": 0,
|
||||||
|
"children": []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "Level2-示例子标签-无场景",
|
||||||
|
"Description": "P3-无场景",
|
||||||
|
"scene": "",
|
||||||
|
"taggroup": "",
|
||||||
|
"deleted": 0,
|
||||||
|
"children": []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}`}
|
||||||
|
</pre>
|
||||||
|
</InfoModal>
|
||||||
|
)}
|
||||||
|
{isReleaseSuccessOpen && (
|
||||||
|
<InfoModal
|
||||||
|
open={isReleaseSuccessOpen}
|
||||||
|
title="发布版本"
|
||||||
|
onClose={closeReleaseSuccess}
|
||||||
|
bodyStyle={{ maxHeight: '60vh', overflowY: 'auto' }}
|
||||||
|
>
|
||||||
|
<p>新版本已发布，当前标签快照已保存。</p>
|
||||||
|
<ReleaseDiffPanel
|
||||||
|
diff={releaseDiff}
|
||||||
|
expanded={releaseDiffExpanded}
|
||||||
|
onToggleSection={toggleDiffSection}
|
||||||
|
/>
|
||||||
|
</InfoModal>
|
||||||
|
)}
|
||||||
|
{isReleaseSyncingOpen && (
|
||||||
|
<InfoModal
|
||||||
|
open={isReleaseSyncingOpen}
|
||||||
|
title="发布版本"
|
||||||
|
content="新版本正在更新中，请稍候..."
|
||||||
|
onClose={() => {}}
|
||||||
|
closable={false}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{isReleaseErrorOpen && (
|
||||||
|
<InfoModal
|
||||||
|
open={isReleaseErrorOpen}
|
||||||
|
title="发布失败"
|
||||||
|
content={
|
||||||
|
releaseErrorMessage ||
|
||||||
|
'发布失败，保存标签或创建版本时出错，请稍后重试。'
|
||||||
|
}
|
||||||
|
onClose={() => setIsReleaseErrorOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{isEditErrorOpen && (
|
||||||
|
<InfoModal
|
||||||
|
open={isEditErrorOpen}
|
||||||
|
title="编辑版本已失效"
|
||||||
|
content={editErrorMessage || '编辑标签时写入数据库失败'}
|
||||||
|
onClose={() => setIsEditErrorOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{isImportSuccessOpen && (
|
||||||
|
<InfoModal
|
||||||
|
open={isImportSuccessOpen}
|
||||||
|
title="导入成功"
|
||||||
|
content="JSON 已导入完成，数据已更新并写入 fst_stash。"
|
||||||
|
onClose={closeImportSuccess}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{isImportErrorOpen && (
|
||||||
|
<InfoModal
|
||||||
|
open={isImportErrorOpen}
|
||||||
|
title="导入失败"
|
||||||
|
content={importErrorMessage}
|
||||||
|
onClose={() => setIsImportErrorOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<ReleaseModal
|
||||||
|
open={isReleaseModalOpen}
|
||||||
|
noVersionTip={noVersionTip}
|
||||||
|
releaseForm={releaseForm}
|
||||||
|
onChangeReleaseForm={setReleaseForm}
|
||||||
|
onCancel={closeRelease}
|
||||||
|
onConfirm={handleReleaseConfirm}
|
||||||
|
/>
|
||||||
|
<RootTagModal
|
||||||
|
open={isRootModalOpen}
|
||||||
|
form={rootForm}
|
||||||
|
onChangeForm={setRootForm}
|
||||||
|
onCancel={handleRootCancel}
|
||||||
|
onConfirm={handleRootConfirm}
|
||||||
|
/>
|
||||||
|
<ChildTagModal
|
||||||
|
open={isChildModalOpen}
|
||||||
|
form={childForm}
|
||||||
|
parentName={parentRow ? parentRow.stsName : ''}
|
||||||
|
level={childLevel}
|
||||||
|
onChangeForm={setChildForm}
|
||||||
|
onCancel={handleChildCancel}
|
||||||
|
onConfirm={handleChildConfirm}
|
||||||
|
/>
|
||||||
|
<EditTagModal
|
||||||
|
open={isEditModalOpen}
|
||||||
|
form={editForm}
|
||||||
|
treeLevel={editTreeLevel}
|
||||||
|
parentName={editParentRow ? editParentRow.stsName : ''}
|
||||||
|
onChangeField={handleEditChange}
|
||||||
|
onCancel={handleEditCancel}
|
||||||
|
onSave={handleEditSave}
|
||||||
|
/>
|
||||||
|
<FstTable
|
||||||
|
rows={rows}
|
||||||
|
expandedIds={expandedIds}
|
||||||
|
onToggleExpand={toggleExpand}
|
||||||
|
onAddChild={handleAddChild}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onDelete={handleDelete}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FstTagPage;
|
||||||
1640
src/pages/FstTagPage.jsx_20260227
Normal file
1640
src/pages/FstTagPage.jsx_20260227
Normal file
File diff suppressed because it is too large
Load Diff
8
src/pages/VersionListPage.jsx
Normal file
8
src/pages/VersionListPage.jsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import VersionListView from '../components/version/VersionListView';
|
||||||
|
|
||||||
|
const VersionListPage = ({ isActive }) => {
|
||||||
|
return <VersionListView isActive={isActive} />;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default VersionListPage;
|
||||||
103
src/services/api.js
Normal file
103
src/services/api.js
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
const isDev = process.env.NODE_ENV === 'development';
|
||||||
|
const baseURL = isDev
|
||||||
|
? '/api'
|
||||||
|
: process.env.REACT_APP_API_BASE_URL || '/api';
|
||||||
|
|
||||||
|
const instance = axios.create({
|
||||||
|
baseURL,
|
||||||
|
timeout: 10000,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
instance.interceptors.request.use(
|
||||||
|
(config) => {
|
||||||
|
const token = localStorage.getItem('token');
|
||||||
|
if (token) {
|
||||||
|
config.headers.Authorization = `Bearer ${token}`;
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
(error) => Promise.reject(error)
|
||||||
|
);
|
||||||
|
|
||||||
|
instance.interceptors.response.use(
|
||||||
|
(response) => response.data,
|
||||||
|
(error) => {
|
||||||
|
if (error.response) {
|
||||||
|
switch (error.response.status) {
|
||||||
|
case 401:
|
||||||
|
console.error('未授权，请登录');
|
||||||
|
break;
|
||||||
|
case 403:
|
||||||
|
console.error('没有权限');
|
||||||
|
break;
|
||||||
|
case 404:
|
||||||
|
console.error('请求的资源不存在');
|
||||||
|
break;
|
||||||
|
case 500:
|
||||||
|
console.error('服务器错误');
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
console.error('请求失败');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return Promise.reject(error);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
const api = {
|
||||||
|
// FST 管理相关接口，对应你截图里的 apidocs
|
||||||
|
getFstAllNodes: () => instance.get('/fst/all_nodes'),
|
||||||
|
getFstBagList: () => instance.get('/fst/baglist'),
|
||||||
|
getFstByName: (name) => instance.get(`/fst/${encodeURIComponent(name)}`),
|
||||||
|
getFstBagsByName: (name) =>
|
||||||
|
instance.get(`/fst/${encodeURIComponent(name)}/bags`),
|
||||||
|
getFstPrintTree: () => instance.get('/fst/print_tree'),
|
||||||
|
updateFstBags: (data) => instance.post('/fst/bags/update', data),
|
||||||
|
createOrUpdateFstNode: (data) => instance.post('/fst/stash/update', data),
|
||||||
|
deleteFstByName: (name) =>
|
||||||
|
instance.delete(`/fst/${encodeURIComponent(name)}`),
|
||||||
|
|
||||||
|
// 以前示例里用到的封装，内部直接复用上面这些接口
|
||||||
|
getFstTags: () => instance.get('/fst/all_nodes'),
|
||||||
|
createFstTag: (data) => instance.post('/fst/stash/update', data),
|
||||||
|
updateFstTag: (data) => instance.post('/fst/stash/update', data),
|
||||||
|
deleteFstTag: (name) =>
|
||||||
|
instance.delete(`/fst/${encodeURIComponent(name)}`),
|
||||||
|
|
||||||
|
// FST 暂存与导入
|
||||||
|
upsertFstStash: (data) => instance.post('/fst/stash/update', data),
|
||||||
|
getFstStash: (version) =>
|
||||||
|
instance.get(`/fst/stash/${encodeURIComponent(version)}`),
|
||||||
|
getFstStashPrintTree: (version) =>
|
||||||
|
instance.get('/fst/stash/print_tree', {
|
||||||
|
params: { version }
|
||||||
|
}),
|
||||||
|
getFstStashDiff: (fromVersion, toVersion) =>
|
||||||
|
instance.get('/fst/stash/diff', {
|
||||||
|
params: {
|
||||||
|
from_version: fromVersion,
|
||||||
|
to_version: toVersion
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
|
||||||
|
// 版本管理（你后端若有对应接口，可以再对齐）
|
||||||
|
createVersion: (data) => instance.post('/versions', data),
|
||||||
|
getVersions: () => instance.get('/versions'),
|
||||||
|
activateVersion: (id, data = {}) =>
|
||||||
|
instance.post(`/versions/stash/${id}/activate`, data || {}),
|
||||||
|
updateVersion: (id, data) => instance.patch(`/versions/${id}/status`, data),
|
||||||
|
deleteVersion: (id) => instance.delete(`/versions/${id}`),
|
||||||
|
getVersionTags: (versionId) => instance.get(`/versions/${versionId}/tags`),
|
||||||
|
exportVersion: (versionId) =>
|
||||||
|
instance.get('/versions/export', {
|
||||||
|
params: { version_id: versionId },
|
||||||
|
responseType: 'blob'
|
||||||
|
})
|
||||||
|
};
|
||||||
|
|
||||||
|
export default api;
|
||||||
Reference in New Issue
Block a user